单击行中按钮时如何在 Javascript 中获取 ID

Question

I get some information using handlebars from backend, and just want to konw how can I get the specific doctorID in javascript when in row button clicked. Any suggestions would be greatly appreciated. Thank you.

html:

<div id="output-doctorinfo"></div>
<script type="text/x-handlebars-template" id="doctorinfo-template">
    {{#each this}}
        <div class="card col s12 m12" id="doctorinfo">
            <div class="card-content black-text">

                <input onclick="showAppinfo()" value="{{doctorID}}" class ="doctorid" id="doctor_{{doctorID}}">

                <div class="col s9 m9" id="doctortext">
                    <span class="card-title">{{firstName}} {{lastName}}</span>
                    <div class="col s12" id="hdn" name="hdn"></div>
                </div>

            </div>
            
            <div class="card-action col s12">
                <div class="row right-align ">
                    <a class="col s5 btn black-text" id="bookingbutton"  href="#modalbooking" onclick="showAppinfo()">Appointments</a>
                    <a class="col s5 btn black-text" id="ratingbutton" href="#modalratingcheck">Ratings</a>
                </div>
            </div>   
        </div>
    {{/each}}
</script>
</div> 

js:

function showAppinfo(){
    var x = document.querySelector(".doctorid").value;
    var url = 'api/api.php?action=showAppinfo&doctorid='+ x; 
   
    fetch(url, 
        {
            method: 'GET',
            credentials: 'include',
            headers: { 
        }
        },
    ) 
    .then(function(response) {
        if(response.status === 204) {
            console.log('204 no available appointments')
            return;
        }
        response.json().then(function(data){
                console.log(data);
                showappinfo.innerHTML = JSON.stringify(data);//按照json格式打印

                 
        })
    })
    .catch(function (err) {
    });
}

Answer 1

Try passing this.id as a parameter.

<input onclick="showAppinfo(this.id);" value="{{doctorID}}" class ="doctorid" id="doctor_{{doctorID}}">

Answered here as well: JavaScript - onClick to get the ID of the clicked button

Answer 2

you need use this in javascript

function showAppinfo(){
    var x = this.value;
    var url = 'api/api.php?action=showAppinfo&doctorid='+ x; 
   
    fetch(url, 
        {
            method: 'GET',
            credentials: 'include',
            headers: { 
        }
        },
    ) 
    .then(function(response) {
        if(response.status === 204) {
            console.log('204 no available appointments')
            return;
        }
        response.json().then(function(data){
                console.log(data);
                showappinfo.innerHTML = JSON.stringify(data);//按照json格式打印

                 
        })
    })
    .catch(function (err) {
    });
}

or like you can pass it by function

<input onclick="showAppinfo({{doctorID}})" value="{{doctorID}}" class ="doctorid" id="doctor_{{doctorID}}">



function showAppinfo(id){
        var x = id;
        var url = 'api/api.php?action=showAppinfo&doctorid='+ x; 
       
        fetch(url, 
            {
                method: 'GET',
                credentials: 'include',
                headers: { 
            }
            },
        ) 
        .then(function(response) {
            if(response.status === 204) {
                console.log('204 no available appointments')
                return;
            }
            response.json().then(function(data){
                    console.log(data);
                    showappinfo.innerHTML = JSON.stringify(data);//按照json格式打印
    
                     
            })
        })
        .catch(function (err) {
        });
    }