个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在使用 HTML 的页面上有以下文本:
“你好，我的名字是 HuggyBiscuit”
我希望能够添加框，例如更改“我的”和“Huggybiscuit”
我可以使用以下代码更改其中 1 个(例如 HuggyBiscuit)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input){
var elementValue = input.value;
document.getElementById("test1").innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit">
<br>
Hello my name is <code id="test1">HuggBiscuit</code>
</body>
</html>但是当我尝试添加第二个文本框时，它只是替换了第一个文本框的输入。我尝试过为所有内容添加单独的 ID，但没有任何方法允许我添加 2 个框来更改句子的单独部分。
两个盒子不工作的示例:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input){
var elementValue = input.value;
document.getElementById("test1","test2").innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit">
<input id="person" name="name" onkeyup = myFunction(this) type="text" value="my">
<br>
Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code>
</body>
</html>最佳答案
获取 document.getElementById("test1","test2")，仅返回一个元素。您可以通过调用函数传递 id 进行修改。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input, id) {
var elementValue = input.value;
document.getElementById(id).innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup="myFunction(this,'text2')" type="text" value="HuggBiscuit">
<input id="person" name="name" onkeyup="myFunction(this, 'text1')" type="text" value="my">
<br>
Hello <code id="text1">my</code> name is <code id="text2">HuggBiscuit</code>
</body>
</html>关于javascript - 如何添加多个文本框来替换页面上的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60969803/
24
4
0
我是一名优秀的程序员,十分优秀！