Form controls and events

Dynamically adding paragraphs from input

An HTML onclick attribute is an event. It determines what function executes when a button is clicked. Of course, there are many event types, but the most used (besides onclick) is onchange, which defines what happens when, e.g., the <input type="text"> control's value gets changed (no need for a confirm button). When using form controls with JavaScript, they do not need to be enclosed within the <form> tag.


<input type="text" id="textInput" style="float: left; margin-right: 10px;">
<input type="button" value="Add" onclick="add()">
<h4 style="margin-top: 10px; clear: both;">Values</h4>
<div id="container"></div>

<script>
    function add() {
        let t = document.getElementById("textInput").value // accessing the value of an "<input type="text">" form control
        let container = document.getElementById("container")
        let newValue = document.createElement("p")
        newValue.className = "newValue"
        newValue.style.margin = "0px"
        newValue.innerText = t
        container.insertBefore(newValue, container.firstChild) // inserting the new value at the top of the container (as its "firstChild")
    }
</script>

Values

Form controls - example


<div id="example">
    <p>Background color</p>

    <button id="orange" onclick="color('orange')">Orange</button>
    <button id="lightblue" onclick="color('lightblue')">Lightblue</button>
    <button id="green" onclick="color('green')">Green</button>

    <p>Font color</p>

    <select name="font" id="font" onclick="font(this.value)">
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="purple">Purple</option>
    </select>

    <p>Font size, e.g., 200%</p>

    <input type="text" id="size" name="size" value="100%" onchange="font_size(this.value)">

    <p>Change the list style type</p>

    <input type="radio" id="disc" name="r" value="disc" onclick="style_type(this.value)"><label for="disc">Disc</label>
    <input type="radio" id="square" name="r" value="square" onclick="style_type(this.value)"><label for="square">Square</label>
    <input type="radio" id="circle" name="r" value="circle" onclick="style_type(this.value)"><label for="circle">Circle</label>

    <ul id="list">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    
    <input type="checkbox" id="border" name="border" onclick="add_border()"><label for="border">Add border to the <code>&lt;div&gt;</code></label>
</div>

<script>
    function color(c) { document.querySelector("#example").style.backgroundColor = c }
    function font(c) { document.querySelector("#example").style.color = c }
    function font_size(c) { document.querySelector("#example").style.fontSize = c }
    function style_type(c) { document.querySelector("#list").style.listStyleType = c }

    function add_border() {
        let img = document.querySelector("#example")
        if (document.getElementById("border").checked)
            img.style.border = "5px solid black"
        else
            img.style.borderWidth = "0px"
    }
</script>

To retrieve the value of the selected radio button, we can also use document.getElementsByName("r"), which returns a NodeList of all radio buttons with the name r. We then loop through them and check which one has checked set to true. For example:


let radios = document.getElementsByName("r")
for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        console.log(radios[i].value)
    }
}

This approach is useful when we need the selected value without attaching individual onclick handlers to each button. Similarly, when retrieving values from <input type="file">, we also get a list (FileList) containing all selected files, which we can iterate over just like with the radio buttons. To access the name of the first list element, we can use: document.querySelector("#fileInput").files[0].name.

Background color

Font color

Font size, e.g., 200%

Change the list style type

  • a
  • b
  • c