Question

我想显示一个div（取决于值输入）但是我在控制台中看不到任何错误指向正确的方向，但我的代码有问题：

<style type="text/css">

#outputOne{display: none;}
#outputTwo{display: none;}
#outputThree{display: none;}

</style>

</head>

<body>


<form method="POST" onsubmit="return showResults()">

    <input type="text" id="valueOne" /><br />
    <input type="text" id="valueTwo" /><br />
    <input type="text" id="valueThree" /><br />
    <input type="submit" id="submit" />

</form>

    <div id="outputOne">Value One</div>
    <div id="outputTwo">Value Two</div>
    <div id="outputThree">Value Three</div>


<script>

function showResults(){

    if(value <= 100){
    document.getElementById('outputOne').style.display = "block";
    return true;
    } if(value > 500){
    document.getElementById('outputTwo').style.display = "block";
    return true;
    }if(value > 10000){
    document.getElementById('outputThree').style.display = "block";
    return true;
    }
}

</script>

Answer 1

如果你想看到一些你应该通过返回false而不是true来阻止提交的东西，因为现在表单将在所有情况下被提交，并且你将永远不会看到显示div，因为页面将被刷新。

希望这有帮助。

Answer 2

您需要定义value变量然后在div上显示submit将返回false，否则页面将刷新并显示所有默认设置

Answer 3

好的，所以有一些问题：

你永远不会在该函数中定义.timeInterval() ......你需要这样做。其次，表单提交将刷新页面，撤消您所做的任何DOM更改。这可以通过将其更改为调用您的功能的按钮来修复。这是您的代码的更新版本：

value

我还将css切换为使用类，这是一种更灵活和更好的练习。

感谢Zakaria Acharki和mohsin azeem发现导致刷新的<style type="text/css"> .hide{display: none;} .show{display: block;} .submit{height:20px; width: 100px;} </style> </head> <body> <input type="text" id="valueOne" /><br /> <input type="text" id="valueTwo" /><br /> <input type="text" id="valueThree" /><br /> <button id="submit" class="submit" onClick="showResults()"></button> <div id="outputOne" class="hide" >Value One</div> <div id="outputTwo" class="hide" >Value Two</div> <div id="outputThree" class="hide" >Value Three</div> <script> function showResults(){ var value = parseInt(document.getElementById('valueOne').value) + parseInt(document.getElementById('valueTwo').value) + parseInt(document.getElementById('valueThree').value); if(value <= 100){ document.getElementById('outputOne').className = "show"; } else { document.getElementById('outputOne').className = "hide"; } if(value > 500){ document.getElementById('outputTwo').className = "show"; } else { document.getElementById('outputTwo').className = "hide"; } if(value > 10000){ document.getElementById('outputThree').className = "show"; } else { document.getElementById('outputThree').className = "hide"; } } </script>错误，以及总是有用的charlietfl，并指出我自己对form按钮的愚蠢错误。< / p>

Answer 4

尝试将oninput事件替换为onsubmit事件

<head>
  <style type="text/css">
    #outputOne {
      display: none;
    }
    #outputTwo {
      display: none;
    }
    #outputThree {
      display: none;
    }
  </style>
  <script>
    
    function showResults() {
      var value = this.value;
      
      console.log(value);
      if (value <= 100) {
        divs[0].style.display = "block";
        divs[1].style.display = divs[2].style.display = "none";
      }
      if (value > 500) {
        divs[1].style.display = "block";
        divs[0].style.display = divs[2].style.display = "none";
      }
      if (value > 10000) {
        divs[2].style.display = "block";
        divs[0].style.display = divs[1].style.display = "none";
      }
    }
    window.onload = function() {
      divs = document.querySelectorAll("div[id^=output]");
      Array.prototype.forEach.call(document.forms[0].querySelectorAll("input")
      , function(el) {
        el.setAttribute("placeholder", "enter a number");
        el.oninput = showResults;
      });
    }
  </script>
</head>

<body>


  <form method="POST">

    <input type="text" id="valueOne" />
    <br />
    <input type="text" id="valueTwo" />
    <br />
    <input type="text" id="valueThree" />
    <br />
    <input type="submit" id="submit" disabled />

  </form>

  <div id="outputOne">Value One</div>
  <div id="outputTwo">Value Two</div>
  <div id="outputThree">Value Three</div>
</body>

提交时显示div

4 个答案: