Bagaimana cara menggunakan onlick untuk mengubah font dalam array div yang diulang?

Saya memiliki array yang saya ulangi untuk menempatkan teks dalam div terpisah pada halaman web (nanti saya menganimasikan div tersebut). Saya ingin menambahkan onclick ke setiap div, jadi ketika div/teks diklik, berat font berubah. Saya tahu setidaknya satu cara untuk menggunakan onclick dalam situasi yang lebih sederhana:

<div class="nameDiv" id="div1" onclick='boldText(this, this.id);'>Test</div>

<script>
function boldText(txt, txtid){
    var el = document.getElementById(txtid);
    var fontstyle = window.getComputedStyle(el, null).fontWeight;

    if (fontstyle != '800') {
    txt.style.fontWeight = '800';
  } else {
    txt.style.fontWeight = '300';
  }

}
</script>

Namun, saya tidak dapat membuat hal yang sama berfungsi dalam kode saya dengan iterasi.

var setNames = function() {
    var h = 0;
    for(var n = 0; n < numberStudents; n++){   
        var divName = "floatName" + n;
        var names = nameArray[n].fields.nickname;  <!-- gets the text/name for each div -->
        var divTag = document.createElement('div');
        divTag.id = divName;
        divTag.innerHTML = names;
        divTag.className = "randomFloat";

        // try to give each div an onclick
        divTag.onclick = boldText(this, this.id);

        studentCol.appendChild(divTag); <!-- attach to studentCol/'anchor'/parent element -->
        };
    };

setNames();

function boldText(txt, txtid){  <!--  pass both the object and the object id -->
    var el = document.getElementById(txtid);   

    // I've tried both lines below -->
    var fontstyle = window.getComputedStyle(el, null).fontWeight; <!-- gives me an error saying el is not an object -->

    //var fontstyle = window.getComputedStyle(el, null).fontWeight;
    // line above gives TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element -->

    if (fontstyle != '300') {
        txt.style.fontWeight = '300';
    } else {
        txt.style.fontWeight = '800';
    }

};

Mungkinkah setiap divTag.id bisa memiliki onclick tersendiri? Jika ya, apa yang perlu saya ubah pada kode saya?


person Doug Smith    schedule 13.08.2018    source sumber
comment
Menurut Anda mengapa Anda perlu meneruskan this dan this.id ke fungsi tersebut? Jika Anda hanya meneruskan this, fungsi tersebut dapat menggunakan txt.id untuk mendapatkan ID jika diperlukan.   -  person Barmar    schedule 13.08.2018
comment
Dan tidak perlu memanggil getElementById, karena elemennya sama dengan txt.   -  person Barmar    schedule 13.08.2018


Jawaban (1)


Masalahnya adalah Anda menetapkan hasil fungsi boldText dan bukan fungsi itu sendiri. Silakan coba ini:

divTag.onclick = boldText;

Dengan cara ini Anda dapat mengakses fungsi this di dalam boldText, tidak perlu memberikan argumen apa pun ke dalamnya. Misalnya.

this.style.fontWeight = '300';
person Sergii Vorobei    schedule 13.08.2018
comment
Bisakah fungsinya juga mengembalikan nilai? Misalnya, dapatkah fungsi boldText() mengembalikan nilai yang menyimpan status bobot font? - person Doug Smith; 14.08.2018