所以基本上我目前面临的是一种尴尬,我创建了一个动态创建新元素并将其添加到DOM的函数。只要单击触发按钮,该函数就会复制元素(相同的id)。我有一个范围滑块,当我滑动时应该更改p标签,现在的问题是,由于p标签已经与函数一起复制(所有p标签具有相同的id),因此只更改了第一个p标签。我想知道我能做些什么才能解决这个问题。有什么帮助吗?
//this function creates elements, it contains the range and //the p tag which needs to p change
function createElements(){
var divelement = $('<input class ="timer" type="range" min="3" max="20" value="10"oninput="showValue(this.value)"></input><p id="changeP"></p>');
$('#userQuestions').append(divelement);
}
function showValue(value){
this.document.getElementById("changeP").innerHTML=value+" Minutes";
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="userQuestions"></div>
<button type="button" onclick="createElements()">add elements</button>
</body>
</html>
运行代码段以查看问题谢谢。
答案 0 :(得分:1)
删除重复的id
,然后只需选择下一个兄弟,并填充其textContent
:
const userQuestions = document.querySelector('#userQuestions');
function createElements() {
userQuestions.insertAdjacentHTML(
'beforeend', '<input class ="timer" type="range" min="3" max="20" value="10"oninput="showValue(this)"><p></p>'
);
}
function showValue({ nextElementSibling, value }) {
nextElementSibling.textContent = value;
}
<div id="userQuestions"></div>
<button type="button" onclick="createElements()">add elements</button>