如何在 <span> div 点击中获取某些标签的内部 HTML

Question

当用户单击DIV时，我试图编写一些应该自动完成表单的JavaScript代码（带有2个字段：标题和ISBN）。这是与类"搜索"类的DIV的一个示例：

<div class='search'>
    <strong>Title: </strong>
    <span style='display:inline' id='title'>Harry Potter</span>
    <strong>ISBN:  </strong>
    <span id='isbn' style='display:inline'>9780545010221</span>
    <strong>Time:  </strong>
    <span id='time' style='display:inline'>22/11/2017 @ 19:00 </span>
</div>

我发挥了一个函数，将事件处理程序添加到"搜索"类的元素中：

function addEventHandlers() {
    var searchElement = document.getElementsByClassName("search");
    for (i = 0; i < searchElement.length; i++) {
        searchElement[i].addEventListener("click",compileForm);
    }
}

和一个编译表格的函数：

function compileForm(e) {
    if(e.target.id=='title') {
        document.getElementById("title").value=e.target.innerHTML;
    }
    else if (e.target.id=='isbn' && e.target.innerHTML!="--"){
        document.getElementById("isbn").value=e.target.innerHTML;
    }
}

可悲的是，我无法做自己想做的事情，因此我必须使用直接在跨度元素上单击的替代方案（一次）来解决。当我单击Div时，是否有某种方法可以获得标题和ISBN？

Answer 1

感谢克里斯·G（Chris G）的评论，我找到了我问题的答案。HTML代码更改为：

<div class='search'>
<strong>Title: </strong>
<span style='display:inline' class='title'>Harry Potter</span>
<strong>ISBN:  </strong>
<span class='isbn'>9780545010221</span>
<strong>Time:  </strong>
<span class='time'>22/11/2017 @ 19:00 </span>
</div>

也更改了JavaScript：

function addEventHandlers() {
var searchElement = document.getElementsByClassName("search");
for (i = 0; i < searchElement.length; i++) {
  searchElement[i].addEventListener("click", compileForm);
}
}
function compileForm() {
  document.getElementById("title").value = this.querySelector(".title").innerHTML;
  document.getElementById("isbn").value = this.querySelector(".isbn").innerHTML;
}