Fatal编程技术网

在单击按钮时运行Javascript

javascript html

在单击按钮时运行Javascript,javascript,html,Javascript,Html,我是Javascript新手，所以我不确定我的代码是否正常工作，因为我不确定如何测试或运行它。我希望我的代码能够显示通过收集所有复选框创建的JSON。我没有在任何地方添加console.log，因为我不确定它在哪里合适。我觉得好像我拥有了所有的东西，但我不知道如何把所有的东西放在一起 预期产出应为： { "testpages" : [...data...], "configs" : [...data...] } 我的代码 <script type="text/javascript

我是Javascript新手，所以我不确定我的代码是否正常工作，因为我不确定如何测试或运行它。我希望我的代码能够显示通过收集所有复选框创建的JSON。我没有在任何地方添加
console.log
，因为我不确定它在哪里合适。我觉得好像我拥有了所有的东西，但我不知道如何把所有的东西放在一起

预期产出应为：

{
  "testpages" : [...data...],
  "configs" : [...data...]
}
我的代码

<script type="text/javascript">
  function grabSelected() {
    var configs = [];
    var testPages = [];
    var selectedConfigs = document.getElementByClassName('.testpages').value;
    var selectedTestPages = document.getElementByClassName('.configs').value;
    for (var i = 0; i < selectedConfigs.length; i++) {
      if (selectedConfigs[i].checked) {
        configs.push(selectedConfigs[i])
      }
    }
    for (var i = 0; i < selectedTestPages.length; i++) {
      if (selectedTestPages[i].checked) {
        testPages.push(selectedTestPages[i])
      }
    }
    var jsonString = {"testpages" : testpages, "configs" : configs};
    var testJson = JSON.stringify(jsonString);
  }
  </script>
  <body class="wrap">
    <form action="POST" >
      <div class="testpages" id="left_col">
        <input id="tp1" type="checkbox" value="1">Test Page 1<br>
        ...
        ...
        <input id="tp30" type="checkbox" value="30">Test Page 30<br>
      </div>
      <div class="configs" id="right_col">
        <input id="config_0" type="checkbox" value="Windows XP internet explorer 8">Windows XP 
        ...
        ...
        <input id="config_59" type="checkbox" value="OS X 10.9 Safari 7">OS X 10.9 Safari 7<br>
      </div>
    </form>
    <input id="" type="submit" value="Submit" onclick="grabSelected();" />
  </body>
<html>


所选函数（）{
var configs=[]；
var testPages=[]；
var selectedConfigs=document.getElementByClassName（'.testpages'）.value；
var selectedTestPages=document.getElementByClassName（'.configs'）.value；
对于（变量i=0；i
...
...
测试页面30

视窗XP
...
...
OS X 10.9 Safari 7
在原始代码中发现的一些（琐碎的）错误：

  • 使用getElementByClassName而不是getElementsByClassName
  • 在jsonString格式中使用testpages而不是testpages
  • 使用父div的类名testpages和configs，而不是 输入元素
以下是您可以使用的：

    <html>
    <script type="text/javascript">
    function grabSelected() {
    var configs = [];
    var testPages = [];
    var selectedConfigs = document.getElementsByClassName('testpages');
    var selectedTestPages = document.getElementsByClassName('configs');
    for (var i = 0; i < selectedConfigs.length; i++) {
      if (selectedConfigs[i].checked) {
        configs.push(selectedConfigs[i].value)
      }
    }
    for (var i = 0; i < selectedTestPages.length; i++) {
      if (selectedTestPages[i].checked) {
        testPages.push(selectedTestPages[i].value)
      }
    }
    var jsonString = {"testpages" : testPages, "configs" : configs};
    var testJson = JSON.stringify(jsonString);
  }
  </script>
  <body class="wrap">
    <form action="POST" >
      <div id="left_col">
        <input class="testpages" id="tp1" type="checkbox" value="1">Test Page 1<br>
        <input class="testpages" id="tp30" type="checkbox" value="30">Test Page 30<br>
      </div>
      <div id="right_col">
        <input class="configs" id="config_0" type="checkbox" value="Windows XP internet explorer 8">Windows XP 

        <input class="configs" id="config_59" type="checkbox" value="OS X 10.9 Safari 7">OS X 10.9 Safari 7<br>
      </div>
    </form>
    <input id="" type="submit" value="Submit" onclick="grabSelected();" />
  </body>
<html>


所选函数（）{
var configs=[]；
var testPages=[]；
var selectedConfigs=document.getElementsByClassName（'testpages'）；
var selectedTestPages=document.getElementsByClassName（'configs'）；
对于（变量i=0；i
测试页面30

视窗XP
OS X 10.9 Safari 7
我认为问题在于您试图返回类的值，而不是检查是否已检查。请尝试getElementByClassName（id）.GetElementsByClassTag（'input'），而不是getElementByClassName（）.value。这将返回一个数组，您可以遍历该数组并返回其值

对SO应用程序中键入的答案格式表示歉意

关上你的
@SpencerWieczorek好鱼。我想当我缩短代码时，我可能删除了太多的内容。那么，什么是有效的，函数是否正在运行？您可以在函数的开始处
console.log
查看它是否正在运行。@SpencerWieczorek我认为我的函数没有作为控制台工作。log没有输出任何内容页面是否重新加载？它是一个表单，您可能需要在末尾添加
return false
。