Web developer specializing in React, Vue, and front end development.
To get the selected radio button’s value with JavaScript, we get the value property.
For instance, we write
const value = document.querySelector('input[name="genderS"]:checked').value;
to select the checked radio button with name attribute genders and that it’s checked by calling querySelector with 'input[name="genders"]:checked'
Then we get its value with the value property.
To prevent an HTTP request just for a favicon with HTML, we set the href attribute of the link element to a base64 URL for the favicon.
For instance, we write
<link
href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC"
rel="icon"
type="image/x-icon"
/>
to add a link element with the href attribute set to the base64 URL for the favicon to stop the browser from making a request to get the favicon.
To stop event propagation with inline onclick attribute with JavaScript, we can call the stopPropagation method.
For instance, we write
<div onclick="onClick(event);">click me</div>
to set the onclick attribute to call the onClick function with the click event object.
Then we write
function onClick(event) {
event.stopPropagation();
}
to define the onClick function to call the stopPropagation method to stop the click event from bubbling up.
To store arbitrary data for some HTML tags, we put the data in the data- attributes.
For instance, we write
<div data-internalid="123"></div>
to set the data-internal attribute of the div to 123.
To use HTML5/JavaScript to generate and save a file, we create a link.
For instance, we write
const link = document.createElement("a");
link.setAttribute(
"href",
"data:text/plain;charset=utf-8," + encodeURIComponent(text)
);
link.setAttribute("download", filename);
link.click();
to call createElement to create a link.
Then we call setAttribute to set the href attribute to the base64 URL of the file we want to download.
We call setAttribute again to set the download attribute to the name of the downloaded file.
Finally, we call click to download the file.