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