如何使用JavaScript创建一组单选按钮？

Question

有谁知道为什么这个简单的程序不起作用？ 这是一个使用Javascript创建一组单选按钮的程序。

<html>
  <head>
    <script>
      function onWriteRadio(Valuse,numButtons,RadioName){
        for(i=0;i<numButtons;i++){
          document.write("<input type='radio' name=" + RadioName + "value="       +Valuse[i]+"/>");
          document.write("<br/>");
        }
      }
    </script>
  </head>

  <body onload="onWriteRadio([red,green,blue],3,'color')>

  </body>
</html>

Answer 1

用这个：

onWriteRadio(['red','green','blue'],3,'color')

字符串化数组值。 当前，您说[红色，绿色，蓝色]，这意味着变量红色，变量绿色，变量蓝色，但是您没有在任何地方定义它们，因此您的程序在说“嗯，我不知道红色是什么”。 ..这样的字符串。

Answer 2

将数组值放在引号中

onWriteRadio(['red','green','blue'],3,'color')

Answer 3

您留下了一些引号。

 function onWriteRadio(values, radioName){ for (var i = 0; i < values.length; i++) { document.write("<input type='radio' name='" + radioName + "' value='" +values[i]+"' >"+values[i]+" </ input>"); document.write("<br/>"); } }

 <html> <body onload="onWriteRadio(['red', 'green', 'blue'], 'color')"> </body> </html>

Answer 4

document.write()将HTML表达式或JavaScript代码写入文档，以替换您之前的html内容。

页面加载完成后执行的document.write()将覆盖页面或写入新页面。

document.write()是一种不良做法

Answer 5

将数组值放在引号中
添加onload的双引号
创建一个包含所有输入代码的字符串，然后编写

您的代码应如下所示：

<html>
<head>
<script>
function onWriteRadio(Valuse,numButtons,RadioName){
    var s = '';
    for(i=0;i<numButtons;i++){
        s += "<input type='radio' name=" + RadioName + "value="       +Valuse[i]+"/>"
    }
    document.write(s);
}
</script>
</head>
<body onload="onWriteRadio(['red','green','blue'],3,'color')">
</body>
</html>

如何使用JavaScript创建一组单选按钮？

问题描述

5 个解决方案

解决方案1
5 2014-01-21 09:27:58

解决方案2
2 2014-01-21 09:28:41

解决方案3
1 2014-01-21 09:44:21

解决方案4
0 2014-01-21 09:27:44

解决方案5
0 2014-01-21 09:30:50

如何使用JavaScript创建一组单选按钮？

问题描述

5 个解决方案

解决方案1 5 2014-01-21 09:27:58

解决方案2 2 2014-01-21 09:28:41

解决方案3 1 2014-01-21 09:44:21

解决方案4 0 2014-01-21 09:27:44

解决方案5 0 2014-01-21 09:30:50

解决方案1
5 2014-01-21 09:27:58

解决方案2
2 2014-01-21 09:28:41

解决方案3
1 2014-01-21 09:44:21

解决方案4
0 2014-01-21 09:27:44

解决方案5
0 2014-01-21 09:30:50