Cara menggunakan change onclick function javascript

The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Show

    The event continues to propagate as usual, unless one of its event listeners calls

    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    0 or
    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    1, either of which terminates propagation at once.

    As noted below, calling preventDefault() for a non-cancelable event, such as one dispatched via

    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    3, without specifying
    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    4 has no effect.

    event.preventDefault()
    

    Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:

    JavaScript

    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    

    HTML

    <p>Please click on the checkbox control.</p>
    
    <form>
      <label for="id-checkbox">Checkbox:</label>
      <input type="checkbox" id="id-checkbox" />
    </form>
    
    <div id="output-box"></div>
    

    Result

    The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault(). Nowadays, you should usually use native HTML form validation instead.

    HTML

    The HTML form below captures user input. Since we're only interested in keystrokes, we're disabling

    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    6 to prevent the browser from filling in the input field with cached values.

    <div class="container">
      <p>Please enter your name using lowercase letters only.</p>
    
      <form>
        <input type="text" id="my-textbox" autocomplete="off" />
      </form>
    </div>
    

    CSS

    We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:

    .warning {
      border: 2px solid #f39389;
      border-radius: 2px;
      padding: 10px;
      position: absolute;
      background-color: #fbd8d4;
      color: #3b3c40;
    }
    

    JavaScript

    And here's the JavaScript code that does the job. First, listen for

    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    7 events:

    const myTextbox = document.getElementById("my-textbox");
    myTextbox.addEventListener("keypress", checkName, false);
    

    The

    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    8 function, which looks at the pressed key and decides whether to allow it:

    function checkName(evt) {
      const charCode = evt.charCode;
      if (charCode !== 0) {
        if (charCode < 97 || charCode > 122) {
          evt.preventDefault();
          displayWarning(
            "Please use lowercase letters only.\n" + `charCode: ${charCode}\n`
          );
        }
      }
    }
    

    The

    const checkbox = document.querySelector("#id-checkbox");
    
    checkbox.addEventListener("click", checkboxClick, false);
    
    function checkboxClick(event) {
      let warn = "preventDefault() won't let you check this!<br>";
      document.getElementById("output-box").innerHTML += warn;
      event.preventDefault();
    }
    
    9 function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:

    let warningTimeout;
    const warningBox = document.createElement("div");
    warningBox.className = "warning";
    
    function displayWarning(msg) {
      warningBox.innerHTML = msg;
    
      if (document.body.contains(warningBox)) {
        clearTimeout(warningTimeout);
      } else {
        // insert warningBox after myTextbox
        myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
      }
    
      warningTimeout = setTimeout(() => {
        warningBox.parentNode.removeChild(warningBox);
        warningTimeout = -1;
      }, 2000);
    }
    

    Result

    Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

    You can use

    <p>Please click on the checkbox control.</p>
    
    <form>
      <label for="id-checkbox">Checkbox:</label>
      <input type="checkbox" id="id-checkbox" />
    </form>
    
    <div id="output-box"></div>
    
    1 to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.