使用超链接更改 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 语句一直在循环。当我输入一个 <0 或 >1000 的数字时，它会提供正确的文本。但是当我输入一个在 canvas 范围内的数字时，下面的函数只显示一秒钟然后循环返回显示 <div id="preT">

Answer 1

你太接近了！在 HTML 5 规范中，表单内的 <button> 默认类型为 submit 您的 javascript 运行，页面立即 "submits" 加载下一页。简单地添加 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>

使用超链接更改 style.display

using a hyperlink to change style.display

html

javascript

if-statement

input

href