Javascript 以编程方式设置按钮文本_Javascript_Html_Button

Javascript 以编程方式设置按钮文本

javascript html button

Javascript 以编程方式设置按钮文本,javascript,html,button,Javascript,Html,Button,我试图通过Javascript将文本设置为按钮，但每个按钮上的值都是setText（字母）。我希望每个按钮在我的数组字母中包含一个随机字母。有人知道我需要在代码中更改什么吗 <!DOCTYPE html> <html> <head> <script> var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p"]; fu

我试图通过Javascript将文本设置为

按钮

，但每个按钮上的值都是

setText（字母）

。我希望每个

按钮

在我的数组

字母

中包含一个随机字母。有人知道我需要在代码中更改什么吗

<!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>


变量字母=[“a”、“b”、“c”、“d”、“e”、“f”、“g”、“h”、“i”、“j”、“k”、“l”、“m”、“n”、“o”、“p”]；
函数setColor（e）{
var目标=e.target，
count=+target.dataset.count；
target.style.backgroundColor=count==1？”#7FFF00:“#FFFFFF”；
target.dataset.count=count==1？0:1；
}
函数setText（平铺）{
返回瓷砖[Math.floor（Math.random（）*tiles.length）]；
}
var inputs=document.querySelectorAll（'input[type=button]'）；
对于（变量i=0；i

当您设置value=“setText（字母）”
时，您不是在执行setText
函数，而是简单地设置文本setText（字母）
。您需要某种代码以编程方式设置输入值，如下所示：
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);
    }
}

var字母=[“a”、“b”、“c”、“d”]；
函数setText（平铺）{
返回瓷砖[Math.floor（Math.random（）*tiles.length）]；
}
window.onload=函数（）{
var inputs=document.querySelectorAll（'input[type=button]'）；
对于（变量i=0；i

请参见当您在onclick
事件上调用函数时，请使用setText（this）
调用它。这样，您就可以设置单击的输入
元素的值
属性
要从数组字母
中获取随机字母，可以从0
到3
中获取随机数，并将其用作随机索引
HTML:


JavaScript:
var字母=[“a”、“b”、“c”、“d”]；
var inpts=document.getElementsByTagName（'input'）；
对于（i=0；i
问题是您试图使用按钮的值（value=“setText（字母）”）。但实际上，您正在将随机值放入文本属性中，但从未“调用”文本值。我假设您应该调用该属性，或者向函数添加一个return语句？
？？他没有用value标签执行任何东西，只是输出其中的文本。你能从value标签执行js吗？我之前试过，但没能。你是怎么做到的编辑####现在你已经编辑了你的帖子，说不执行…@Billy Nope。我想说的是，在将setText（字母）
赋值给value属性时，OP没有执行任何操作编辑是的。我忘了那件事。但我认为上下文有助于推断这是一个打字错误：）。无论如何，谢谢。它在您的演示中有效，但由于某些原因，它在我的代码中不起作用。你能看看我上面编辑的代码吗。也许你能找到问题？@user2456977检查更新的代码。加载页面后，您需要运行代码。我让按钮更改颜色“onClick”。我是否可以执行两个方法“onClick”？函数setColor（e）{var target=e.target，count=+target.dataset.count；target.style.backgroundColor=count==1？#7FFF00:“#ffffffff'；target.dataset.count=count==1？0:1；}'target”是在“setColor”中定义的变量dataset'是Javascript中的预定义单词，我相信target event属性返回触发事件的元素。它在我的电脑上运行得很好。这很好，但是每次我点击按钮时，按钮都会改变文本。我希望他们被设置一次，并保持这样
<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" />

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;
}