I want to change the content and add a class to the element clicked with javascript.
If i try to assign a class after specifying the character string stored in the array by passing the number specified in the loop, it will be undefined.
The processing of classList.add (cls [i]) inserts undefined.
Corresponding source code<body>
Aiueo
Kakikukeko
Sashisuseso
<script>
document.addEventListener ('DOMContentLoaded', function () {
var btns = document.querySelectorAll ('.btn');
let cls = ["btn01", "btn02", "btn03"]
for (var i = 0;i<btns.length;i ++) {
btns [i] .addEventListener ('click', function () {
this.innerHTML = "It's changed";
this.classList.add (cls [i])
}, false);
}
}, false);
</script>
</body>
-
Answer # 1
-
Answer # 2
i is referenced "after clicking".
The value of i is "3" after the for is removed.
Since 3 is an index that cls does not have, it will be undefined.
Therefore, it is better to reorganize to get the number of the class in which the event occurred. -
Answer # 3
I've done the same before,
btns [i] .addEventListener ('click', function () { this.innerHTML = "It's changed"; this.classList.add (cls [i]) }, false);
That's because i has been used in.
Specifically, this is the part of this.classList.add (cls [i]).If you think about it normally, when each button is pressed, it seems that 0 to 2 are in order in the above i, but it is different.
btns [i] .addEventListener ('click', function () {
}, false);The program inIt is executed when the click event occurs, and the contents of i at that timing are applied.
In other words, once this program is executed, the for statement turns, and when i is added and i becomes 3, the loop is exited.
When a click event occurs after that
this.classList.add (cls [3])
It means that it will be processed like this. -
Answer # 4
Hello
If you want to make the minimum correction, you can use the loop counter.
i
Tovar
notlet let
If you declare and initialize with, it will be as intended.--for (var i = 0;i<btns.length;i ++) { + for (let i = 0;i<btns.length;i ++) {
Sample for operation check:https://codepen.io/jun68ykt/pen/oNxEaOv?editors=0010
-
Answer # 5
const cls = ["btn01", "btn02", "btn03"]; document.querySelectorAll ('.btn'). forEach ((x, y) =>{ x.addEventListener ('click', () =>{ x.textContent = "It has changed"; x.classList.add (cls [y]); }); });
Related articles
- javascript - i want to give a class name to an enlarged image with luminous (image enlargement script)
- javascript - i want to insert the start tag and end tag of html tags individually using jquery
- javascript: about output of multidimensional array
- javascript - get the value of the array in the object , how to use in an if statement
- javascript - i want to display the contents of an associative array and a combination of arrays
- javascript - i want to make it random with the array compatible
- javascript - i want to fetch an associative array but unhandled runtime error
- javascript - i want to use a value initialized in one class in another unrelated class with no arguments
- javascript - i want to change the display range of the array
- javascript - i want to handle an array in a switch statement, but i don't understand the specifications
- how to amplify an array with javascript
- javascript - i want to replace a class component with a function component
- javascript - how to delete the item of json array read by nodejs?
- javascript - how to make an array by separating with specified characters
- javascript - i want to shift the display of the array
- is it possible to get a value from an associative array by specifying an indefinite key in javascript?
- i want to check the elements of a multidimensional array with javascript
- javascript - i want to use a function with the same name as a string that is the value of a variable in an object in vuejs
- i want to output a date string in a text box with javascript
- javascript - i want to get an element from a multidimensional array
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- python - you may need to restart the kernel to use updated packages error
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- python 3x - typeerror: 'method' object is not subscriptable
- javascript - how to check if an element exists in puppeteer
- xcode - pod install [!] no `podfile 'found in the project directory
- i want to call a child component method from a parent in vuejs
- vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning
Hello.
Since i is not block-scoped, it cannot hold a value for each loop and is incremented after the loop ends, so it goes beyond the scope of the array and is undefined.
reference:
Common mistakes: Creating closures inside a loop | Closures --JavaScript | MDN