我已经创建了一个文本字段来更改一个值,这在某一方面似乎工作正常。
Voornaam: <h3 id="title1">Test</h3>
<input type="text" id="myTextField1"/>
<input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>
这链接到这个 javascript 函数:
function change1(){
var myNewTitle = document.getElementById('myTextField1').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
var title = document.getElementById('title1');
title.innerHTML = myNewTitle;
}
这没有任何问题并显示了我更改后的值,但是当我想在我的 html 代码中较低的地方显示相同的值时,它不会显示更改后的值。
下面是更改后的值没有显示的部分代码:
<section class="bg-green">
<div class="block left wide">
<article>
<h1>testfile<br/><span contenteditable="true" data-id="school-name"><?php echo $schoolName; ?></span></h1>
<br/>
<p>
<strong>Geachte <span data-id="name"><?php echo $salutation; ?> <?php echo $lastName; ?></span></strong>,
<p id="title1">Test.</p>
</p>
应该出现的部分是
<p id="title1">Test.</p>
谁能指出我正确的方向?
最佳答案
您似乎不止一次使用了 ID“title1”。 document.getElementById 只会找到一个(第一个,如果我没记错的话)。
使用类并迭代 getElementByClassName 找到的元素
var titles = document.getElementsByClassName('title1');
Array.prototype.forEach.call(titles,title => {
title.innerHTML = myNewTitle;
});
这是一个有效的 jsfiddle我的解决方案。
关于javascript - 更改值未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44288327/