Question

我有一个从li元素创建的下拉菜单，每个元素都有一个唯一的ID。我不想编写4个不同的变量，而是想创建一个循环（如果可能并且有道理），但是遇到了问题。单击特定的li后，程序应使用此li值更改innerhtml。

function calories_calculator() {
  const list = new Array(3);
  list[0] = "1";
  list[1] = "2"; /////// those numbers are id of li elements
  list[2] = "3";
  list[3] = "4";
  const array = [];

  for (var i = 0; i < list.length; i++) {
    const f = document.getElementById(list[i]).onclick;
    if (true) {
      document.getElementById("display").innerHTML = list[i];
    }
  }
}

Answer 1

这是您想要的吗？

  <ul>
    <li id="id1"><button>aaaaa</button></li>
    <li id="id2"><button>bbbbb</button></li>
    <li id="id3"><button>ccccc</button></li>
    <li id="id4"><button>ddddd</button></li>
  </ul>
  <div></div>
</body>
<script>
	const elements = document.querySelectorAll('li')
	elements.forEach(element => {
		element.addEventListener('click' , () => {
			document.querySelector('div').innerHTML = element.textContent;
		})
	})
</script>
</html>

Answer 2

“ onclick”事件处理程序似乎存在语法问题。在onclick之后应加上等号，然后是函数。我发现此答案可能有用： Handling "onclick" event with pure JavaScript

有没有办法选择循环中的元素

2 个答案: