点击按钮运行Javascript

running Javascript on button click

本文关键字：Javascript 运行 按钮      更新时间：2023-09-26

我是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>

在原始代码中发现的一些（琐碎的）错误：

  • 使用了getElementByClassName而不是getElementsByClassName
  • 在jsonString格式中使用了testpage而不是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>

我认为问题在于您试图返回类的值，而不是检查是否已检查。请尝试getElementByClassName（id）.getElementsByTag（'input'），而不是getElementByClassName（）.value。这将返回一个数组，您可以循环该数组并返回其值。

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

相关文章：