使用超链接更改 style.display

Question

目前，我有一个带有空 href 的超链接。最初的目标是我有一个输入数字元素，div 的显示发生变化（style.display = 'none';），然后超链接弹出，以便用户可以将显示更改为内联或 flex（style.display = 'inline';） 这是我的 HTML 和 JavaScript，解释的显示更改在 if 语句的 else 部分中

HTML：

<div class="preT" id="preT">
  <form>
    <label for="voipLines">VoIP Lines</label>
    <input type="number" id="voipLines" name="voipLines" required min="1" max="1000" value="1">
    <button class="button" onclick="testfun()">Test Clicker</button>
  </form>
  <div class="voipbutton" id="voipbutton">
  </div>
</div>
<div id="duringT">
  <p Id="clickerTest"></p>
  <div Id="prBar" data-label=""></div>
  <div id="canvascon"></div>
</div>

JavaScript：

function testfun() {
  var voip = document.getElementById("voipLines").value;
  if (voip < 1) { //voiplines verification 
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else if (voip > 1000) {
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else { // Trying to move the button within the form element
    document.getElementById("clickerTest").innerHTML = '<h2 id="testT">Clicker Successful!!!</h2><p>Please click the link below to start <b>' + voip + ' test</b></p><p id="reset">To change the amount of tests to run <a href= "">Click Here</a></p>';
  }

PS。

我打算为此建立一个单独的论坛，但我想如果有人知道这个解决方案，那就太好了。

如果有人对显示的内容有任何想法：

自从我将按钮从<div id = "VoIP button"> 放入<form> 标记后，if 语句就一直在循环。当我输入一个 1000 的数字时，它会提供正确的文本。但是当我输入一个范围内的数字时，画布和以下函数仅显示一秒钟，然后循环返回以显示 <div id="preT">

Answer 1

你离得太近了！在 HTML 5 规范中，表单内的 <button> 具有默认类型 submit 您的 javascript 运行，并且页面立即“提交”以加载下一页。只需添加type="button" 即可防止这种情况并停止提交表单。

function testfun() {
  var voip = document.getElementById("voipLines").value;
  if (voip < 1) { //voiplines verification 
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else if (voip > 1000) {
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else { // Trying to move the button within the form element
    document.getElementById("clickerTest").innerHTML = '<h2 id="testT">Clicker Successful!!!</h2><p>Please click the link below to start <b>' + voip + ' test</b></p><p id="reset">To change the amount of tests to run <a href= "">Click Here</a></p>';
  }
}

<div class="preT" id="preT">
  <form>
    <label for="voipLines">VoIP Lines</label>
    <input type="number" id="voipLines" name="voipLines" required min="1" max="1000" value="1">
    <button class="button" type="button" onclick="testfun()">Test Clicker</button>
  </form>
  <div class="voipbutton" id="voipbutton">
  </div>
</div>
<div id="duringT">
  <p Id="clickerTest"></p>
  <div Id="prBar" data-label=""></div>
  <div id="canvascon"></div>
</div>