JavaScript改变具有相同ID困境的元素的值

时间:2018-06-13 23:35:50

标签: javascript html dom range

所以基本上我目前面临的是一种尴尬,我创建了一个动态创建新元素并将其添加到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>

运行代码段以查看问题谢谢。

1 个答案:

答案 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>