我目前使用文本字段来更改html中的文本。
我的文字字段:
Voornaam:
<h3 class="title1">Kevin</h3>
<input type="text" id="myTextField1" />
<br/><br/>
完成输入文字后,按下按钮:
<input type="button" id="myBtn" value="Change" />
触发此功能:
document.querySelector('#myBtn').addEventListener('click', function change() {
function isInvalid(input) {
return input.value.length == 0;
}
var titles = [...document.querySelectorAll('[class^="title"]')];
var inputs = [...document.querySelectorAll('[id^="myTextField"]')];
var anchor = document.querySelector('#myLink');
if (inputs.some(isInvalid)) {
alert('Write some real text please.');
anchor.href = 'convert.php';
} else {
var querystring = inputs.map((input, index) => `var${index + 1}=${titles[index].textContent = input.value}`);
// $('.title'+index).html(input.value);
anchor.href = `convert.php?${querystring.join('&')}`;
}
});
文本字段上方的值:
<h3 class="title1">Kevin</h3>
确实发生变化,这很好,但是它需要在其他地方进行更改。这个似乎没有改变..另一个应该改变的是:
<p class="title1">Test.</p><p class="title2">Achternaam</p>
类标题一也应该在这里改变,尽管这不会发生。
有人可以告诉我我做错了吗?
答案 0 :(得分:1)
根据您提供的代码,您犯的错误是您有一个包含1个输入元素的数组:#myTextField1
你通过map循环这个1的数组来改变标题数组(我可以告诉你的数组大约3个)。但事实是,因为输入数组只有索引0,所以你也只会改变titles数组的第一个元素。
现在我完全理解了代码,这是一个可能的解决方案。一旦知道要搜索的元素的索引,您基本上就想要做标题选择器。
var inputs = [...document.querySelectorAll('[id^="myTextField"]')];
var querystring = inputs.map((input) => {
// Remove all leading non-digits to get the number
var number = input.id.replace( /^\D+/g, '');
var titles = [...document.querySelectorAll('.title'+ number)];
titles.forEach((title) => title.innerHTML = input.value);
return `var${number}=${input.value}`;
});
此外,不依赖于querySelectorAll给你的索引的干净运气(当id &#39; myTextField1&#39; 的元素不是第一个在DOM,你搞砸了),我现在从id字符串值中取数字而不是=&gt;变量number
。
点击此处查看working fiddle example。