javascript，单击时更改与单击的元素不同的元素的 html

Question

我想通过点击一个词来改变 p 标签的内部html，但我不想改变我点击的那个词的内部html。我想更改显示在我单击的词旁边的词。

我的 html 看起来像这样。点击的单词的每一个id后面都有一个黑色的p标签，其id比被点击的多一个

<p id="word0" data-index=0 class="russian"> люблю</p>
<p id="word1" data-index=1 class="english"></p>

当我点击俄语单词时，英语单词的黑色 p 标签应该由英语单词填充。

这是我的 javascript。目前，单词 one two three ect 将在单击时放置在俄语单词旁边。有没有一种方法可以将标签的 innerHTML 定位到被点击的词旁边？

<script>

    let allWordsList = {'word0':'one','word1':'one','word2':'two','word3':'three'}


    function changeText(e){
        var number = e.target.id;

       // Set the text to the data-index value of the HTML element:
       e.target.innerHTML = allWordsList[number];

    }

</script>

Answer 1

您正在更改所点击元素的内部HTML。 e 是您点击的段落的事件，e.target 是您点击的 HTML 元素。因此，如果您更改 e.target 的内部 HTML，那么它会更改自己而不是下一个兄弟。

e.target.innerHTML = allWordsList[number];

解决此问题的一种方法是：

let allWordsList = {
  'word0': 'one',
  'word1': 'one',
  'word2': 'two',
  'word3': 'three'
}


function changeText(e) {
  var number = e.target.id;
  var convertedNumber = allWordsList[ number ];
  //Set the text to the data-index value of the HTML element:
  const nextSibling = e.target.nextElementSibling;
  nextSibling.innerHTML = convertedNumber;
}

const paragraphs = document.querySelectorAll(".para");
paragraphs.forEach( e => {
  e.addEventListener("click", changeText);
})

<p id="word0" data-index=0 class="russian para"> люблю</p>
<p id="word1" data-index=1 class="english"></p>

<p id="word2" data-index=0 class="russian para"> люблю</p>
<p id="word3" data-index=1 class="english"></p>

javascript，单击时更改与单击的元素不同的元素的 html

javascript, on click change the html of an element different than the one that was clicked on

javascript

innerhtml

word