分享
三行代码  ›  专栏  ›  技术社区  ›  KFaidon K.

Console.log()和el.innerText立即重置(帮助)

  •  0
  • KFaidon K.  · 技术社区  · 2 天前

    链接到视频: https://drive.google.com/file/d/1B7TycQxZPi0dqx7Try6kUZM3pcJs0ILW/view

    有人能提出解决办法吗?

    document.getElementById("btn").addEventListener("click", e => {
      console.log(e);
      result.innerText = document.getElementsByName("day");
    });
    <h1>Your Day Plan:</h1>
    <p>Enter your day</p>
    <form>
      <input type="radio" id="mon" name="day" value="mon" />
      <label for="mon">mon</label><br />
      <input type="radio" id="tue" name="day" value="tue" />
      <label for="tue">tue</label><br />
      <input type="radio" id="wed" name="day" value="wed" />
      <label for="wed">wed</label><br />
      <input type="radio" id="thu" name="day" value="thu" />
      <label for="thu">thu</label><br />
      <input type="radio" id="fri" name="day" value="fri" />
      <label for="fri">fri</label><br />
      <button id="btn">Calculate Plan</button>
    </form>
    <h5 id="result"></h5>
    1 回复  |  直到 2 天前
        1
  •  0
  •   Mamun    2 天前

    默认的按钮类型是submit,为了防止表单提交,您必须指定 type="button" 手动:

    <button type="button" id="btn">Calculate Plan</button>
    

    使用 event.preventDefault()

    这个 接口的 preventDefault() 方法告诉用户代理,如果事件未得到显式处理,则不应按正常方式执行其默认操作。

    <h1>Your Day Plan:</h1>
    <p>Enter your day</p>
    <form>
      <input type="radio" id="mon" name="day" value="mon" />
      <label for="mon">mon</label><br />
      <input type="radio" id="tue" name="day" value="tue" />
      <label for="tue">tue</label><br />
      <input type="radio" id="wed" name="day" value="wed" />
      <label for="wed">wed</label><br />
      <input type="radio" id="thu" name="day" value="thu" />
      <label for="thu">thu</label><br />
      <input type="radio" id="fri" name="day" value="fri" />
      <label for="fri">fri</label><br />
      <button id="btn">Calculate Plan</button>
    </form>
    <h5 id="result"></h5>
    
    <script>
    
      document.getElementById("btn").addEventListener("click", e => {
        console.log(e);
        result.innerText = document.getElementsByName("day");
        event.preventDefault();
      });
    
    </script>