Question 10827 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

innerHTML of my buttons doesn't apear on the screen – Jquery

so I have an issue with innerHTML. I have an empty array buttons which i populate using a for loop. Then with another for loop i set each button’s innerHTML to "Info" but when I check my website buttons stay empty.

                //Array
                let buttons = [];

                //Questions for loop
                for(let i = 0; i < 2; i++)
                {
                    //Loop that populates Buttons array
                    for(let l = 0; l < 4; l++)
                {
                    buttons[l] = $(`#btn${l}`);
                } 

                //for loop that sets button's inner
                //HTML's
                for(let s = 0; s < buttons.length; s++)
                {
                    buttons[s].innerHTML = "Info";
                }


                }


            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Quiz Game</title>
            </head>
            <body>
            <!-- Main Container -->
                <div class="main-container">
                    <!-- Header -->
                    <h1 class="header" id="header">Quiz Game</h1>

                    <!-- Buttons -->
                    <button id="btn0"></button>

                    <button id="btn1"></button>

                    <button id="btn2"></button>

                    <button id="btn3"></button>
                </div>


            <script src="/library/jquery-3.6.3.min.js"></script>
            <script src="test1.js"></script>
            </body>
            </html>
Tags:

2

Answers


  1. 0

    With jQuery, you should call buttons[s].html("Info"); to set the innerHTML. However, buttons[s].text("Info"); is better here as you don’t actually have any HTML tags in the string.

    You could also select all the buttons with one selector for ids starting with "btn", then set all their text at once.

    const buttons = $('[id^=btn]');
buttons.text('Info');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn0"></button>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
    Login or Signup to reply.
  2. 0

    Actually, I tested your code and it worked fine.
    I see you call , and I suppose your JavaScript is running in this file.

    Maybe the problem is an exception inside this file preventing the execution to reach the "innerHTML" command.

    Can you please post your "test1.js" content or any console logs?

    //Array
let buttons = [];

//Questions for loop
for (let i = 0; i < 2; i++) {
    //Loop that populates Buttons array
    for (let l = 0; l < 4; l++) {
        //Replaced JQuery with Vanilla
        buttons[l] = document.getElementById("btn" + l);
    }

    //for loop that sets button's inner
    //HTML's
    for (let s = 0; s < buttons.length; s++) {
        buttons[s].innerHTML = "Info";
    }


}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Game</title>
</head>
<body>
    <!-- Main Container -->
    <div class="main-container">
        <!-- Header -->
        <h1 class="header" id="header">Quiz Game</h1>

        <!-- Buttons -->
        <button id="btn0"></button>

        <button id="btn1"></button>

        <button id="btn2"></button>

        <button id="btn3"></button>
    </div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search