如何改变 **<p> ** 在 Javascript 中更改量程表时的值？</p>
[英]how to change **<p>** value while changing range meter in Javascript?
问题描述
我想创建这样的东西，但在这段代码中，我为每个DIV分别制作了一个 function我们需要为此编写多个 function 吗？ 我真的很困惑如何做到这一点。
有人帮我解决这个问题吗？
帮助我提供源代码，以便我了解需要更改的内容。
谢谢
// --------------x-------------------x-------------------x------------------ // -----------------x-----------------x----------------------x------------- // Select Therepy start // --------x--------------x-------------x-------------- // Applied Behaviour document.getElementById("myText").addEventListener("touchend",myFunction) document.getElementById("myText").addEventListener("click",myFunction) function myFunction() { var myText=parseInt(document.getElementById("myText").value) if(myText==1){ var b=document.getElementById("change").innerHTML='<p>3-9 Months</p>' } if(myText==2){ document.getElementById("change").innerHTML='<p>9-15 Months</p>' } if(myText==3){ document.getElementById("change").innerHTML='<p>15-24 Months</p>' } if(myText==4){ document.getElementById("change").innerHTML='<p style="color:red;">24+ Months</p>' } } // Effect JS document.getElementById("eff").addEventListener("touchend",efunction) document.getElementById("eff").addEventListener("click",efunction) /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */ function efunction() { var myText=parseInt(document.getElementById("eff").value) console.log(myText) if(myText==1){ var b=document.getElementById("effc").innerHTML='<p>None visible to anyone</p>' } if(myText==2){ document.getElementById("effc").innerHTML='<p>Some, visible only to therapist</p>' } if(myText==3){ document.getElementById("effc").innerHTML='<p>quite, visible to family as well </p>' } if(myText==4){ document.getElementById("effc").innerHTML='<p style="color:red;">Significant, visible to everyone</p>' } } // -------------x-----------------x-----------------x-----------------x------------ //Sensory INtegration start function st(){ var wtf=document.getElementById('sit') if(wtf.style.display=="none"){ wtf.style.display="block" } else if(wtf.style.display=="block"){ wtf.style.display="none" } } document.getElementById("stfv").addEventListener("touchend",myFunction1) document.getElementById("stfv").addEventListener("click",myFunction1) function myFunction1() { var stf=parseInt(document.getElementById("stfv").value) if(stf==1){ document.getElementById("stfvp").innerHTML='<p>3-9 Months</p>' } if(stf==2){ document.getElementById("stfvp").innerHTML='<p>9-15 Months</p>' } if(stf==3){ document.getElementById("stfvp").innerHTML='<p>15-24 Months</p>' } if(stf==4){ document.getElementById("stfvp").innerHTML='<p style="color:red;">24+ Months</p>' } } // js Effect /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */ document.getElementById("eff1").addEventListener("touchend",efunction1) document.getElementById("eff1").addEventListener("click",efunction1) function efunction1() { var eftext=parseInt(document.getElementById("eff1").value) if(eftext==1){ document.getElementById("effcp").innerHTML='<p>None visible to anyone</p>' // console.log(b) } if(eftext==2){ document.getElementById("effcp").innerHTML='<p>Some, visible only to therapist</p>' } if(eftext==3){ document.getElementById("effcp").innerHTML='<p>quite, visible to family as well </p>' } if(eftext==4){ document.getElementById("effcp").innerHTML='<p style="color:red;">Significant, visible to everyone</p>' } } // End **
<,doctype html> <html lang="en"> <head> <title>Title</title> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1. shrink-to-fit=no"> <:-- Bootstrap CSS v5.0.2 --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0;2/dist/css/bootstrap:min;css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <:-- ------------------x---------------------x--------------------- --> <;-- Therpies start --> <div class="form-group"> <div id="sth"> <br> <input type="checkbox" id="aba" name="ABA" onclick="ra()" value="Applied Behaviour Analysis"> ? <label for="aba"> Applied Behaviour Analysis</label> <div id="ss"> <br> <div style="border:2px solid #CED4DA;padding?10px:"> <p>How long was the teatment carried for;</p> <center> <input type="range" onclick="abam" name="rang" id="myText" value="1" min='1' max="4"></center> <center> <p id="change" style="color:green;">3-9 Months</p> </center> <hr> <p>Positive effects of therapy visible:</p> <center> <input type="range" name="rang1" id="eff" value="1" min='1' max="4"></center> <center> <p id="effc" style="color;green?">None visible to anyone</p> </center> </div> </div> <br> <br> <:-- ------------------x--------------------x----------------x-------------------------> <input type="checkbox" id="siti" name="sit" onclick="st()" value="Sensory Integration Therapy"> <label for="siti"> Sensory Integration Therapy</label><br><br> <div id="sit" > <div style="border;2px solid #CED4DA?padding:10px;"> <p>How long was the teatment carried for:</p> <center> <input type="range" onclick='stfvfa()' name="sitr" id="stfv" value="1" min='1' max="4"></center> <center> <p id="stfvp" style="color.green.">3-9 Months</p> </center> <hr> <p>Positive effects of therapy visible.</p> <center> <input type="range" name="sitrr1" id="eff1" value="1" min='1' max="4"></center> <center> <p id="effcp" style="color.green.">None visible to anyone</p> </center> </div> <br> </div> </div> <:-- Therpies ends --> <.-- Bootstrap JavaScript Libraries --> <script src="https.//cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html>
我想要什么：-> 关于当您移动测距仪时，底部的文本会像 3-15 个月和 15-25 个月一样发生变化，但我想要的是同样的东西，但在这段代码中，我使用了多个 ID 选择器并创建了很多功能，即如果我们需要创造1000个这样的条件，那是不可能的。 那么这是做同样事情的另一种方法吗？ 就像我创建一个 function 并在每个地方调用它一样？
2 个解决方案
解决方案1
1 已采纳 2022-01-13 18:02:33
这是最简单的方法！
您需要为每个具有唯一id的输入字段创建一个DIV ，然后创建一个function() ，在其中检查用户在哪个div中，以便 function 获取 div 的id ，然后获取相同 div 的input字段的id并在最后它将获取同一DIV的<p>...</p>的值，然后它将相应地更改<p>...</p> 。
function _cd_(ss){ var v=ss.id //Fetching id of div container var _v_=document.getElementById(v).firstElementChild.id var _d_=document.getElementById(v).lastElementChild.id var _k_=document.getElementById(_v_).value if(_k_==1){ document.getElementById(_d_).innerHTML="<p>Value 1</p>" } else if(_k_==2){ document.getElementById(_d_).innerHTML="<p>Value 2</p>" } else if(_k_==3){ document.getElementById(_d_).innerHTML="<p>Value 3</p>" } else if(_k_==4){ document.getElementById(_d_).innerHTML="<p>Value 4</p>" } } <div id="cot" onclick="_cd_(this);"> <input type="range" min="1" max="4" value="1" id="name1"> <p id="_cv_">This</p> </div> <div onclick="_cd_(this)" id="some"> <input type="range" min="1" max="4" value="1" id="name2"> <p id="_cd_">This</p> </div>解决方案2
-1 2022-01-11 17:38:54
尝试通过执行myFunction(this)来使用 function 参数，该函数将该 div 作为值传递给 function，并使用它来实现您想要的，并尝试制作一个 ZA8CFDE6331BD59EB2AC96F8911C4 的更改范围应该出现什么变化。 或者尝试使用类而不是 id
另外，我建议使用switch case语句而不是：
if (x ==1){
//..
}
else if (x ==2){
//..
}
else if (x ==3){
//..
}
如何从数组中选取随机值而在p5 / javascript中值不不断变化？
[英]How to pick a random value from an array without the value constantly changing in p5/javascript?
用Javascript更改输入值后如何强制Angular 2 [（ngModel）]更改？
[英]How to force Angular 2 [(ngModel)] change after changing input value with Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.