Web developer specializing in React, Vue, and front end development.
To correctly iterate through getElementsByClassName with JavaScript, we use a for-of loop.
For instance, we write
const slides = document.getElementsByClassName("slide");
for (const slide of slides) {
console.log(slide);
}
to call getElementsByClassName to select all elements with class slide.
Then we use a for-of loop to loop through all the slides and log its value.
To do something before on submit with JavaScript, we call preventDefault in the submit handler.
For instance, we write
<form id="formId" action="/" method="POST" onsubmit="prepareForm(event)">
<input type="text" value="" />
<input type="submit" value="Submit" />
</form>
to add a form.
We set the onsubmit attribute to call the prepareForm function.
Then we write
function prepareForm(event) {
event.preventDefault();
// ...
document.getElementById("formId").requestSubmit();
}
to define the prepareForm function.
In it, we call preventDefault to stop the default submit behavior.
And then we select the form with getElementByid and call requestSubmit to submit the form.
To get a number of random elements from an array with JavaScript, we use the array sort and Math.random methods.
For instance, we write
const shuffled = array.sort(() => 0.5 - Math.random());
const selected = shuffled.slice(0, n);
to call sort to returned a shuffled version of the array by calling it with a function that returns a random number.
Then we get an array with the first n items in the shuffled array with slice.
To place div element at center of screen with CSS, we use flexbox.
For instance, we write
<html>
<head> </head>
<body>
<div class="center-screen">I'm in the center</div>
</body>
</html>
to add a div.
Then we write
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
to make the div a flex container with display: flex;.
Then we set its flex direction to vertical with flex-direction: column;.
We horizontally center its content with align-items: center;.
And we vertically center its content with justify-content: center;.
To parse Excel (XLS) file in JavaScript, we use the read-excel-file package.
To install it, we run
npm i read-excel-file
Then we add an input with
<input type="file" id="input" />
Then we write
import readXlsxFile from "read-excel-file";
const input = document.getElementById("input");
input.addEventListener("change", async () => {
const data = await readXlsxFile(input.files[0]);
});
to select the input with querySelector.
And then we add a change event listener with addEventListener.
We call readXlsxFile with the selected file to get a promise with the read Excel data as nested array.