Global variable not updating in JavaScript despite the function being called
Question
<script>
var seatselected = 'Hola'
function colorchange(element) {
element.style.background = "#ff914d";
element.style.color = "white";
seatselected += element.innerHTML;
seatselected += '+';
//alert(seatselected);
}
document.getElementById("XYZ").innerHTML = seatselected;
</script>
This is the JS part of my code. When I call the colorchange function, the color changes. So, onlick() is not an issue in HTML. However, seatselected doesn't get updated. The innerHTML code gives me "Hola", even though I know colorchange has been executed. At the same time, if I use alert inside the function, it alerts me with the innerHTML value that I expect the global variable to have.
EDIT: Here is the HTML part of the code, when I call the function. The function is called successfully, as when I click the element, the background color and text color change.
<td class="highlight" onclick="colorchange(this)">B1</td>
<td class="highlight" onclick="colorchange(this)">B2</td>
<td class="highlight" onclick="colorchange(this)">B3</td>
<td class="highlight" onclick="colorchange(this)">B4</td>
<p id="XYZ"></p>
What I'm trying to do is that I want to add onto a string the innerhtml of whichever element is being clicked. Now when I try to put it in XYZ, the changes made inside the function do not show up.
2 answers
solution1
1 2020-11-27 09:24:43
- Take a piece of paper. (The paper represents the
seatselectedvariable) - Write "Hola" on that piece of paper. (This is the string)
- Read the piece of paper out to yourself. (This represents the alert)
- Photocopy the piece of paper (This represents assigning to an element's
innerHTMLas you mentioned in a comment). - Ask a friend to wave at you (press a button), and when they do write something different on the piece of paper.
Now. Did you hear yourself say, out loud, whatever is currently written on the piece of paper? Does the text on the photocopy change?
No .
The instructions (the program) don't tell you to read out the paper every time it changes.
Nor do they make it possible for the second thing you wrote on the paper to travel back in time and replace "Hola" before you read out and photocopied what was printed on it.
If you want to see an alert after the button has been pressed then you need to write code which calls alert after the button has been pressed.
ie in the function you call from the event handler
ie where you have commented out alert
Likewise, if you want to change the value assigned to innerHTML then you need to explicitly change it. Assigning a string to innerHTML assigns the current string value , not a reference to the variable you copied that value from.
solution2
-1 2020-11-27 09:29:31
Just added alert() inside the function
<!DOCTYPE html>
<html>
<head>
<title>Add Checkbox Dynamically using JavaScript</title>
</head>
<body>
<table>
<td class="highlight" onclick="colorchange(this)">B1</td>
<td class="highlight" onclick="colorchange(this)">B2</td>
<td class="highlight" onclick="colorchange(this)">B3</td>
<td class="highlight" onclick="colorchange(this)">B4</td>
</table>
</body>
<script>
var seatselected = 'Hola'
function colorchange(element) {
element.style.background = "#ff914d";
element.style.color = "white";
seatselected += element.innerHTML;
seatselected += '+';
alert(seatselected);
}
*/</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.