Question

我尝试通过Javascript将文本设置为Buttons，但每个按钮上的值只显示setText(letters)。我希望每个Button在我的数组letters中包含一个随机字母。有人知道我的代码需要改变什么吗？

<!DOCTYPE html>
<html>
<head>

<script>
var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p"];

function setColor(e) {
  var target = e.target,
      count = +target.dataset.count;

   target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF';
   target.dataset.count = count === 1 ? 0 : 1;
}

function setText(tiles){
      return tiles[Math.floor(Math.random() * tiles.length)];
}

var inputs = document.querySelectorAll('input[type=button]');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = setText(letters);
}

</script>
</head>

<body>
<div>
<input type="button" id="button0" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button1" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />
<input type="button" id="button2" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button3" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

</div>

<div>
<input type="button" id="button4" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button5" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />
<input type="button" id="button6" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button7" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />
</div>

<div>
<input type="button" id="button8" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button9" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />
<input type="button" id="button10" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button11" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />
</div>

<div>
<input type="button" id="button12" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button13" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />
<input type="button" id="button14" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />

<input type="button" id="button15" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" />
</div>

</body>
</html>

Answer 1

当您设置value="setText(letters)"时，您没有执行setText功能，只需设置文本setText(letters)。您需要某种代码，以编程方式设置输入值，如下所示：

var letters = ["a", "b", "c", "d"];

function setText(tiles){
    return tiles[Math.floor(Math.random() * tiles.length)];
}

window.onload = function () {
    var inputs = document.querySelectorAll('input[type=button]');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = setText(letters);
    }
}

请参阅demo

Answer 2

当您在onclick事件上调用此功能时，请使用setText(this)进行调用。这样，您可以设置已点击的value元素的input属性。

要从数组letters获取随机字母，您可以从0到3获取一个随机数，并将其用作随机索引。

Fiddle

HTML：

<input type="button" id="button0" value="Change" style="color:black; width: 50px; height: 50px" onclick="setText(this)"; data-count="1" />
<input type="button" id="button1" value="Change" style="color:black; width: 50px; height: 50px" onclick="setText(this)"; data-count="1" />
<input type="button" id="button2" value="Change" style="color:black; width: 50px; height: 50px" onclick="setText(this)"; data-count="1" />
<input type="button" id="button3" value="Change" style="color:black; width: 50px; height: 50px" onclick="setText(this)"; data-count="1" />

的JavaScript：

var letters = ["a", "b", "c", "d"];
var inpts = document.getElementsByTagName('input');

for (i = 0; i < inpts.length; i++) {
    inpts[i].value = letters[Math.round(Math.random() * (letters.length - 1))];
    var count = inpts[i].dataset.count;
    inpts[i].style.backgroundColor = count == 1 ? "#7FFF00" : '#FFFFFF';
    inpts[i].dataset.count = count == 1 ? 0 : 1;
}
function setText(e) {
    var count = e.dataset.count;
    e.style.backgroundColor = count == 1 ? "#7FFF00" : '#FFFFFF';
    e.dataset.count = count == 1 ? 0 : 1;
}

Answer 3

oroblem是你试图使用按钮的值（value =“setText（字母）”）。但事实上，你将应该存在的随机值放入text属性 - 但从不“调用”文本值。我假设您应该调用该属性或向函数添加一个return语句？

以编程方式设置Button文本

3 个答案:

Fiddle

HTML：

的JavaScript：