如何<a>从 html 获取标签的选定值？</a>

Question

这是我的下拉菜单

<div class="dropdown" >
    <button onclick="myFunction()" class="dropbtn">Course List</button>
    <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">

        {% for list in list1%}
            <a id="courseName" onclick="addCourse()"> {{list.courseName}}</a>
        {% endfor %}
    </div>
</div>

在这里我试图访问所选课程名称的值

function addCourse() {
    var x = document.getElementById("courseName").value
    document.getElementById("demo").innerHTML = x;
}

但这结果给了我“未定义”。

Answer 1

看起来你正在运行一个循环，不要将 id 用于多个元素，Id 必须是唯一的，而是使用类。

不确定您使用的是什么语言，laravel？ 无论如何试试这个。

{% for list in key=>list1%}
<a class="courseName" onclick="addCourse(e)"> {{list.courseName}}</a>
{% endfor %}
</div>

function addCourse(e){
  var x = e.target.textContent
  document.getElementById("demo").innerHTML = x;
}               

Answer 2

我想你想要一个动态元素

`  {% for list in list1%}
<a id="courseName" onclick="addCourse(this)" name ={{list.courseName}} > 
{{list.courseName}}</a>`
{% endfor %}


function addCourse(obj){
var x = $(obj).attr("name");
alert(x); 
} 
`