Question

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

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

Answer 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>

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

1 个答案: