using a hyperlink to change style.display

Question

currently, I have a hyperlink with an empty href. the initial goal was that I have an input number element witch the div's display changes (style.display = 'none';) and then the hyperlink pops up so the user can change the display to inline or flex (style.display = 'inline';) here are my HTML and JavaScript the display changes explained are in the else section of the if statement

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.

I plan on making a separate forum for this but I figured if anyone knows this solution, it would be nice.

If anyone has any ideas from what is shown:

The if statement is looping ever since I put the button from <div id = "VoIP button"> and into the <form> tag. when I put a number that is <0 or >1000 it provides the proper text. but when I put a number that is within the range the canvas and following functions show for just a second then loop back to show <div id="preT">

Answer 1

You're so close! In the HTML 5 spec, a <button> inside of a form has a default type of submit Your javascript runs, and the page imediately "submits" to load the next page. Simply adding type="button" will prevent this and stop submitting the form.

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>