使用超链接更改样式。显示

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的数字时，它会提供正确的文本。但是当我输入一个在范围内的数字时，canvas和以下函数仅显示一秒钟，然后循环返回以显示<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>