Display button value in div onclick. Javascript/HTML-CodePudding

I have a set of buttons with different values. When I press a button I want the value of the button to be displayed in the div picked_letters, but nothing is showing. The code is divided in an html file and a javascript file.

html file looks like this:

<body>

<script src="cases.js"></script>

<div id="written_word">
</div>

<div id="list_of_letters">
</div>

<div id="picked_letters">

</div>

</body>

and the onclick in the javascript file looks like this:

for(let i = 0; i < 26; i  ) {
    let btn = document.createElement("button");
    btn.style.background = 'silver';
    btn.style.width = '15%';
    btn.style.fontWeight = 'bold';
    btn.style.fontSize = '135%';
    btn.style.display = 'inline-block';
    btn.value = case_values[i];
    btn.onmouseover = function (){
        btn.style.background = 'goldenrod';
    }
    btn.onmouseleave = function() {
        btn.style.background = 'silver';
    }
    btn.onclick = function() {
        btn.style.background = 'darkgrey';
        btn.disabled = true;
        btn.innerHTML = String(btn.value);
        document.getElementById("picked_letters").innerHTML =
            String(btn.value);
    }
    btn.innerHTML = String(i 1);
    document.body.appendChild(btn);
}

The button changes color, becomes disabled and displays the value inside the button but it's the last line with getting the button value into a div that I am having problems with. Have looked around but haven't found a solution that solves this problem.

##Edit: The problem seems to have been fixed when I put the script import at the end of the body (and some other minor changes).

CodePudding user response：

Where are you setting the value of the button? Can you share the button code?

Does your button look like this?

<button>My Button</button>

or do you set your value like this?

<button value="my button value">My button</button>

If you have a value set - you can do this:

btn.onclick = function () {
  console.log(btn.innerHTML);
  btn.style.background = "darkgrey";
  btn.disabled = true;
  document.getElementById("picked_letters").innerHTML = btn.value;
};

If you don't have a value set - using btn.value won't return anything. I would try adding a value to your button if you dont have one. Or if you want to call the innerhtml of the button:

<button>My button</button>

and then

btn.onclick = function () {
  console.log(btn.innerHTML);
  btn.style.background = "darkgrey";
  btn.disabled = true;
  document.getElementById("picked_letters").innerHTML = btn.innerHTML;
};

CodePudding user response：

The code above is perfectly fine, the is definately being displayed in the "picked_letters" div, but the value of btn is ""(empty) so the value set to the div is also empty. To solve this issue, add value to the button by doing:- . and the issue will be gone.

const btn = document.querySelector('#btn')
btn.onclick = function() {
  btn.style.background = 'darkgrey';
  btn.disabled = true;
  console.log(btn.value)
  btn.innerHTML = String(btn.value);
  document.getElementById("picked_letters").innerHTML = 
    String(btn.value);
}

<body>


<div id="written_word">
  
</div>

<div id="list_of_letters">
</div>

<div id="picked_letters">

</div>
  <button id='btn' value='5'>Tap me</button>

</body>