根据文本输入更改具有某个类的所有元素(change all elements with a certain class based on text input)
我认为这将会非常简单,但我还没有找到答案。 如何使class="namehere"所有span元素显示输入文本中插入的内容?
function start() { var name = document.getElementById("name").value; document.getElementByClassName("namehere").innerHTML = name; }<input id="name" type="text" value="Type name here"> <button type="button" onclick="start()">start</button> <br> <br> <span class="namehere"></span> is doing this and that. <br> <span class="namehere"></span> wants to do this and that. <br> <span class="namehere"></span> is not doing this or that. <br> <span class="namehere"></span> wants to do this but instead is doing that.I think this is going to be something very simple but I haven't found an answer. How would I make all span elements with class="namehere" display what was inserted in input text?
function start() { var name = document.getElementById("name").value; document.getElementByClassName("namehere").innerHTML = name; }<input id="name" type="text" value="Type name here"> <button type="button" onclick="start()">start</button> <br> <br> <span class="namehere"></span> is doing this and that. <br> <span class="namehere"></span> wants to do this and that. <br> <span class="namehere"></span> is not doing this or that. <br> <span class="namehere"></span> wants to do this but instead is doing that.最满意答案
看看jQuery,它会帮助你很多这样的解决方案。
您需要在头文件中包含<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> ,并将您的代码更改为:
<!DOCTYPE html> <html> <head> <title>test</title> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <input id="name" type="text" value="Type name here"> <button type="button" onclick="start()">start</button> <br> <br> <span class="namehere"></span> is doing this and that. <br> <span class="namehere"></span> wants to do this and that. <br> <span class="namehere"></span> is not doing this or that. <br> <span class="namehere"></span> wants to do this but instead is doing that. <script> function start(){ var name = $("#name").val(); $(".namehere").text(name); } </script> </body> </html>Take a look in jQuery, it will help you a lot with this kind of solution.
You need to include <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> in your header and change your code to that:
<!DOCTYPE html> <html> <head> <title>test</title> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <input id="name" type="text" value="Type name here"> <button type="button" onclick="start()">start</button> <br> <br> <span class="namehere"></span> is doing this and that. <br> <span class="namehere"></span> wants to do this and that. <br> <span class="namehere"></span> is not doing this or that. <br> <span class="namehere"></span> wants to do this but instead is doing that. <script> function start(){ var name = $("#name").val(); $(".namehere").text(name); } </script> </body> </html>
更多推荐
namehere,class,start,text,电脑培训,计算机培训,IT培训"/> <meta name="des
发布评论