根据文本输入更改具有某个类的所有元素(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
发布评论