JavaScript:如何用变量填充单选按钮值和标签

JavaScript: how to populate radio button value and label with variable

本文关键字：单选按钮 标签 填充 变量 何用 JavaScript      更新时间：2023-09-26

恐怕这是一个初学者的问题，应该已经回答了，但要么没有回答，要么我无法正确表达自己。。。请耐心等待，我希望这有一个快速的解决方案：

我想用变量填充表单的单选按钮。稍后我想从我的谷歌电子表格中获取值，但我已经被变量卡住了。

<body>
  <div>
      <h4>Main Page</h4>
        <fieldset style="background: #eceff9;"><legend style="padding: 10px;">Select Material</legend>
           <label><input type="radio" name="matPick" id="mat1"></label><br>
           <label><input type="radio" name="matPick" id="mat2" value="Material 2"> Material 2</label><br>
        </fieldset>
  </div>


(function() {
var mat1 = 'Material 1';
document.getElementById("mat1").innerHTML = mat1;
})();

我还制作了一把小提琴。

我希望代码能解释我想要实现的目标，基本上html应该显示与Material2类似的内容，但使用我的javascript变量创建。

非常感谢你的帮助！Martin

您正在尝试更改输入的innerHTML。当然，这是无效的。您需要找到输入的父项，然后插入文本。

(function() {
    var mat1 = 'Material 1';
    var ele = document.getElementById("mat1").parentNode;
    ele.appendChild(document.createTextNode(mat1));
})();

试试这个：

<body>
      <div>
          <h4>Main Page</h4>
            <fieldset style="background: #eceff9;"><legend style="padding: 10px;">Select Material</legend>
               <input type="radio" name="matPick"><label id="mat1"></label><br>
               <label><input type="radio" name="matPick" id="mat2" value="Material 2"> Material 2</label><br>
            </fieldset>
      </div>
</body>
相关文章：