Question

我尝试编写一些javascript代码，用于在用户点击div时自动填写表单（包含2个字段：title和isbn）。这是div的一个例子＆＃34; search＆＃34;：

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

我创建了一个函数来为类的元素添加事件处理程序＆＃34;搜索＆＃34;：

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;
    }
}

可悲的是，我无法做我想做的事情，所以当用户直接点击span元素（一次一个）时，我不得不解决这个问题。当我点击div时，有没有办法获得title和isbn？

Answer 1

感谢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;
}

如何获取div内的一些<span>标签的innerHTML on

1 个答案: