ボタンを押したらボタンが出てくるプログラム、最初のボタンを消去して見た目を整えたい。

こんにちは。困っているプログラムの前置きですが、配列にone,two,three,four,fiveを入れて、ボタンを押したらそれらのどれか一つがなくなり、全部で五回ボタンを押すと配列が空になるプログラムを作っています。僕がまず考えた案は、配列をランダムでどれか一つを選んで消去して五回繰り返そうという物ですが、ランダムに選んだ配列の番号は一度決めたらページを更新するまで変わらないと気づき失敗でした。その対策としての案でボタンを押すとランダムで一個配列から消えて新しい次のボタンが生成され、それを五回繰り返すのですが、ボタン一つ一つに別々のランダム変数で配列を一個消すプログラムを書けば、ページを更新しなくてもランダムの結果がきちんと５回出るのですが、それではボタンの数が増えます。一回使ったボタンはthis.disabled = trueで押せなくしたらいいのですが、それでは不格好になり意図に合いません。

作っているプログラムの一部です。一番目のボタンを消去したいのですが、formのidであるbutを取得して書き換えると全てのボタンが消えてしまいます。なので最初のボタンだけ取得して消す方法を探しています。是非お力添えくださいますようお願いします。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>

<body>
	<table border="1">
		<tr>
			<td><div id="zOne">1</div></td>
		    <td><div id="zTwo">2</div></td>
		    <td><div id="zThree">3</div></td>
		    <td><div id="zFour">4</div></td>
		    <td><div id="zFive">5</div></td>
		</tr>
	</table>
	<form action="#" id="but">
	<input type="button" value="ランダム表示" onclick="choice()">
	<div id="sample"></div>
	</form>
	<script>
	var liRandom = ['iOne','iTwo','iThree','iFour','iFive'];
		var r = Math.floor(Math.random() * liRandom.length);
		
		var choice = function(){
			console.log(liRandom[r]);
			if(r === 0){
				document.getElementById('zOne').textContent = '';
		    }
		    if(r === 1){
			    document.getElementById('zTwo').textContent = '';
		    }
		    if(r === 2){
			    document.getElementById('zThree').textContent = '';
		    }
		    if(r === 3){
			    document.getElementById('zFour').textContent = '';
		    }
		    if(r === 4){
			    document.getElementById('zFive').textContent = '';
		    }
			
			var div_element = document.createElement('div');
			div_element.innerHTML ='<input type="button" value="新しいボタン">';
			var parent_object = document.getElementById('sample');
			parent_object.appendChild(div_element);
		}
	</script>
<!--本当は配列31個ある予定なんです笑。イヤアアァァ!!!!-->
</body>
</html>

og24715

2018/07/03 09:08

ソースコードは ``` で始まりと終わりを囲うと見栄えが良くなりますので質問の修正をお願いします

x_x

2018/07/03 09:30

配列の要素が消えることとボタンがたくさんあることの関連が見えません。ボタンは一つでいいですよね？

行動規範の内容に同意します

回答1件

ベストアンサー

js
1var r = Math.floor(Math.random() * liRandom.length);

上の部分で乱数生成している様に見えるので、これを choice関数のなかでやればクリックされるたびに違う変数が生成されるように思うので、以下の様に choice 関数を修正されてはどうですか。

js
1var choice = function(){
2  var r = Math.floor(Math.random() * liRandom.length);
3  console.log(liRandom[r]);
4  console.log(liRandom[r]);
5  if(r === 0){
6    document.getElementById('zOne').textContent = '';
7  }
8  if(r === 1){
9    document.getElementById('zTwo').textContent = '';
10  }
11  if(r === 2){
12    document.getElementById('zThree').textContent = '';
13  }
14  if(r === 3){
15    document.getElementById('zFour').textContent = '';
16  }
17  if(r === 4){
18    document.getElementById('zFive').textContent = '';
19  }
20}

余裕ですね。…そう、 React ならね。

https://codepen.io/og24715/pen/QxoYLM?editors=0010

js
1class App extends React.Component {
2  static style = {
3    button: {
4      fontFamily: 'Arial',
5      color: '#ffffff',
6      background: '#3498db',
7      padding: 10,
8    }
9  };
10
11  /**
12   * Returns a random integer between min (inclusive) and max (inclusive)
13   * Using Math.round() will give you a non-uniform distribution!
14   * 
15   * @see https://stackoverflow.com/questions/1527803
16   */
17  static getRandom(min, max) {
18      return Math.floor(Math.random() * (max - min + 1)) + min;
19  }
20
21  state = {
22    list: [...Array(31).keys()],
23  }
24
25  _handleClick = () => {
26    const { list } = this.state;
27    const deleteIndex = App.getRandom(0, this.state.list.length);
28    console.log(deleteIndex);
29    list.splice(deleteIndex, 1);
30    this.setState({ list });
31  };
32
33  render() {
34    return (
35      <div>
36        <h1>Hello.</h1>
37        {this.state.list.map(v => (
38          <button
39            key={v}
40            style={App.style.button}
41            onClick={this._handleClick}
42          >
43            {v+1}
44          </button>
45        ))}
46      </div>
47    );
48  }
49}
50
51ReactDOM.render(
52  <App />,
53  document.querySelector('#root'),
54)