如何改变 **<p> ** 在 Javascript 中更改量程表时的值？</p>
[英]how to change **<p>** value while changing range meter in Javascript?
问题描述
I want to create something like this but in this code I made a seperate function for every single DIV is it any another way to code which work same but in less functions becuase this is possible for few steps but if we need to add multiple options so we need to write multiple function for this?
我想创建这样的东西，但在这段代码中，我为每个DIV分别制作了一个 function我们需要为此编写多个 function 吗？ I really very confused how to do this.我真的很困惑如何做到这一点。
Somebody help me out with this issue?有人帮我解决这个问题吗？
Help me with source code so I can understand what I need to change.帮助我提供源代码，以便我了解需要更改的内容。
Thank you谢谢
// --------------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>
What I want:-> about when you move range meter so text in bottom is changing like 3-15months then 15-25months that same thing I want but for this, In this code I use multiple ID selector and created lot of functions which is kind of impossible if we need to create 1000 of this kind of conditions.我想要什么：-> 关于当您移动测距仪时，底部的文本会像 3-15 个月和 15-25 个月一样发生变化，但我想要的是同样的东西，但在这段代码中，我使用了多个 ID 选择器并创建了很多功能，即如果我们需要创造1000个这样的条件，那是不可能的。 so is this any another way to do this same thing?那么这是做同样事情的另一种方法吗？ Like I create a single function and calling this in every where?就像我创建一个 function 并在每个地方调用它一样？
2 个解决方案
解决方案1
1 已采纳 2022-01-13 18:02:33
This is the simplest way to do this !这是最简单的方法！
You need to create a DIV for every input field with a unique id and then make a function() in which check user is in which div so function fetch the id of div and then fetch id of input field of the same div and at the end it will fetch the value of <p>...</p> of the same DIV and then it will change <p>...</p> accordingly.您需要为每个具有唯一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
Try using function parameters by doing myFunction(this) that passes that div as the value to that function, and use that to achieve what you want, and try making an object that stores what div should contain what on the change of what range, and what should appear on changing.尝试通过执行myFunction(this)来使用 function 参数，该函数将该 div 作为值传递给 function，并使用它来实现您想要的，并尝试制作一个 ZA8CFDE6331BD59EB2AC96F8911C4 的更改范围应该出现什么变化。 Alternatively try using classes instead of ids或者尝试使用类而不是 id
Also, I would suggest to use switch case statements instead of:另外，我建议使用switch case语句而不是：
if (x ==1){
//..
}
else if (x ==2){
//..
}
else if (x ==3){
//..
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.