[英]using a hyperlink to change style.display
currently, I have a hyperlink with an empty href.目前,我有一个带空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最初的目标是我有一个输入数字元素,其中 div 的显示发生变化(
style.display = 'none';
),然后超链接弹出,以便用户可以将显示更改为内联或弹性( style.display = 'inline';
) 这是我的 HTML 和 JavaScript 解释的显示更改在 if 语句的else
部分
HTML: 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: 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. 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.自从我将按钮从
<div id = "VoIP button">
放入<form>
标记后,if 语句就一直在循环。 when I put a number that is <0 or >1000 it provides the proper text.当我输入一个 <0 或 >1000 的数字时,它会提供正确的文本。 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">
但是当我输入一个在 canvas 范围内的数字时,以下函数仅显示一秒钟,然后循环返回以显示
<div id="preT">
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.你已经很接近了,在 HTML 5 规范中,表单内的
<button>
具有默认类型的submit
您的 javascript 运行,并且页面立即“提交”以加载下一页。 Simply adding type="button"
will prevent this and stop submitting the form.只需添加
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.