在 div onclick 中显示按钮值。 Javascript/HTML答案

【问题标题】：Display button value in div onclick. Javascript/HTML在 div onclick 中显示按钮值。 Javascript/HTML
【发布时间】：2022-02-13 11:48:33
【问题描述】：

我有一组具有不同值的按钮。当我按下按钮时，我希望按钮的值显示在 div picked_letters 中，但没有显示任何内容。代码分为html文件和javascript文件。

html 文件如下所示：

<body>

<script src="cases.js"></script>

<div id="written_word">
</div>

<div id="list_of_letters">
</div>

<div id="picked_letters">

</div>

</body>

javascript 文件中的 onclick 如下所示：

for(let i = 0; i < 26; i++) {
    let btn = document.createElement("button");
    btn.style.background = 'silver';
    btn.style.width = '15%';
    btn.style.fontWeight = 'bold';
    btn.style.fontSize = '135%';
    btn.style.display = 'inline-block';
    btn.value = case_values[i];
    btn.onmouseover = function (){
        btn.style.background = 'goldenrod';
    }
    btn.onmouseleave = function() {
        btn.style.background = 'silver';
    }
    btn.onclick = function() {
        btn.style.background = 'darkgrey';
        btn.disabled = true;
        btn.innerHTML = String(btn.value);
        document.getElementById("picked_letters").innerHTML =
            String(btn.value);
    }
    btn.innerHTML = String(i+1);
    document.body.appendChild(btn);
}

按钮更改颜色，变为禁用并显示按钮内的值，但这是将按钮值放入我遇到问题的 div 的最后一行。环顾四周，但没有找到解决此问题的解决方案。

##Edit：当我将脚本导入放在正文末尾时，问题似乎已得到解决（以及其他一些小改动）。

【问题讨论】：

标签： javascript html button

【解决方案1】：

你在哪里设置按钮的值？可以分享一下按钮代码吗？

你的按钮是这样的吗？

<button>My Button</button>

或者你是这样设置你的值的？

<button value="my button value">My button</button>

如果你有一个值集 - 你可以这样做：

btn.onclick = function () {
  console.log(btn.innerHTML);
  btn.style.background = "darkgrey";
  btn.disabled = true;
  document.getElementById("picked_letters").innerHTML = btn.value;
};

如果您没有设置值 - 使用 btn.value 将不会返回任何内容。如果您没有按钮，我会尝试为您的按钮添加一个值。或者如果你想调用按钮的innerhtml：

<button>My button</button>

然后

btn.onclick = function () {
  console.log(btn.innerHTML);
  btn.style.background = "darkgrey";
  btn.disabled = true;
  document.getElementById("picked_letters").innerHTML = btn.innerHTML;
};

【讨论】：

我用 javascript 文件中的整个创建按钮循环编辑了我的问题。我在 onclick 之前为按钮设置了一个值，它是字母表中的一个随机字母，se line btn.value = case_values[i]。而且我相信设置了一个值，因为按钮文本更改为 onclick-part 中的按钮值。

【解决方案2】：

上面的代码非常好，肯定会显示在“picked_letters”div中，但是btn的值是“”（空）所以设置给div的值也是空的。要解决此问题，请通过以下方式为按钮添加价值：- .问题就会消失。

const btn = document.querySelector('#btn')
btn.onclick = function() {
  btn.style.background = 'darkgrey';
  btn.disabled = true;
  console.log(btn.value)
  btn.innerHTML = String(btn.value);
  document.getElementById("picked_letters").innerHTML = 
    String(btn.value);
}

<body>


<div id="written_word">
  
</div>

<div id="list_of_letters">
</div>

<div id="picked_letters">

</div>
  <button id='btn' value='5'>Tap me</button>

</body>

【讨论】：

我用 javascript 文件中的整个创建按钮循环编辑了我的问题。我在 onclick 之前为按钮设置了一个值，它是字母表中的一个随机字母，se line btn.value = case_values[i]。而且我相信设置了一个值，因为按钮文本更改为 onclick-part 中的按钮值。