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>

Background color

Font color

Font size, e.g., 200%

Change the list style type

  • a
  • b
  • c