CODEWITHSUNDEEP
javascripthtml
Ali Hamza Khan
Ali Hamza Khan

Reputation: 21

How to get selected value of <a> tag from html?

This is my drop down

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

here i am trying to access value of the selected course name

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

But this is giving me "undefined" as a result.

Upvotes: 1

Views: 57

Answers (2)

zad fab
zad fab

Reputation: 84

I think you want a dynamic element

`  {% 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); 
} 
`

Upvotes: 1

luis
luis

Reputation: 202

looks like you are running a loop, don't use the id for multiple elements, Id's must be unique, instead use classes.

not sure what what language you are using, laravel? anyway try this.

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

Upvotes: 1

Related Questions