代码之家  ›  专栏  ›  技术社区  ›  blake mcgarry

如何使两个事件侦听器都工作

addeventlistener radio-button javascript
  •  0
  • blake mcgarry  · 技术社区  · 7 年前

    我想做的是,当您更改选项时,让第一个事件侦听器在更改时使用它,然后在填写表单后,将其弹出到页面底部。我只能使用香草Javascript。此外,如果您选择任何其他选项,则第5个选项将变为灰色,并且无法选择任何单选按钮。然后你填写表单,我不能让表单提交,我只能让它用innerHTML下拉。 

    <!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <meta charset="utf-8">
  <title>Create</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">

        <form>
          <!--selections inputs-->

          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="select">
              <option value="4">1</option>
              <option value="51">2</option>
              <option value="765">3</option>
              <option value="74747">4</option>
              <option value="1">5</option>
            </select>
          </div>
          <!--radio inputs-->
          <div class="form-check">
            <input class="form-check-input" type="radio" name="color" id="red" disabled>
            <label class="form-check-label" for="exampleRadios1">
              Red Fleet
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="color" id="white" disabled>
            <label class="form-check-label" for="exampleRadios2">
              White Fleet
            </label>
          </div>
          <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="color" id="blue" disabled>
            <label class="form-check-label" for="exampleRadios3">
              Blue Fleet
            </label>
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">change this</label>
            <input type="text" class="form-control" id="date" aria-
                   describedby="emailHelp">

          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">change this</label>
            <input type="text" class="form-control" id="location">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">change this</label>
            <input type="text" class="form-control" id="textbox">
          </div>

          <button type="submit" class="btn btn-primary" id="btn">Submit</button>
        </form>
      </div>
      <div class="col-lg-6"></div>
      <p id="dateout"></p>
      <p id="locationout"></p>
      <p id="textboxout"></p>
    </div>
  </div>

  <script>
    window.addEventListener("DOMContentLoaded", init, false);
    function init(e) {
      e.preventDefault;
      document.getElementById("select").addEventListener("change", start);
    }//end init function
    //main algorithm
    function start(e) {
      e.preventDefault;
      short();

      //child one
      function short(e) {
        e.preventDefault;
        var blue;
        var white;
        var red;
        var select;
        select = document.getElementById("select").value;

        if (select == 1) {
          document.getElementById("red").disabled = false;
          document.getElementById("white").disabled = false;
          document.getElementById("blue").disabled = false;
          document.getElementById("btn").addEventListener("click", uhjeff);
        }
        else {
          document.getElementById("red").disabled = true;
          document.getElementById("white").disabled = true;
          document.getElementById("blue").disabled = true;
          document.getElementById("btn").addEventListener("click", uhjeff);
        }
      }
    }
    
    function uhjeff(e) {
      var date;
      var location;
      var textbox;

      e.preventDefault;
      document.getElementById("dateout").innerHTML = document.getElementById("date").value;
      document.getElementById("locationout").innerHTML = document.getElementById("location").value;
      document.getElementById("textboxout").innerHTML = document.getElementById("textbox").value;
    }
  </script>
</body>
</html>
    1 回复  |  直到 7 年前
        1
  •  1
  •   Scott Marcus    7 年前

    您有几个错误。请阅读下面的HTML和JavaScript注释进行更正。 

    <!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <meta charset="utf-8">
  <title>Create</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">

        <form>
          <!--selections inputs-->

          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="select">
              <option value="4">1</option>
              <option value="51">2</option>
              <option value="765">3</option>
              <option value="74747">4</option>
              <option value="1">5</option>
            </select>
          </div>
          <!--radio inputs-->
          
          <!-- The "for" attribute of a <label> must match the "id" attribute of the
               element that it is a label for. -->
          <div class="form-check">
            <input class="form-check-input" type="radio" name="color" id="red" value="red" disabled>
            <label class="form-check-label" for="red">Red Fleet</label>
          </div>
          <div class="form-check">
            <!-- radio buttons need to have a value for them to have meaning -->
          
            <input class="form-check-input" type="radio" name="color" id="white" value="white" disabled>
            <label class="form-check-label" for="white">White Fleet</label>
          </div>
          <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="color" id="blue" value="blue" disabled>
            <label class="form-check-label" for="blue">Blue Fleet</label>
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">change this</label>
            <input type="text" class="form-control" id="date" aria-describedby="emailHelp">
          </div>
          <div class="form-group">
            <label for="location">change this</label>
            <input type="text" class="form-control" id="location">
          </div>
          <div class="form-group">
            <label for="textbox">change this</label>
            <input type="text" class="form-control" id="textbox">
          </div>

          <button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
        </form>
      </div>
      <div class="col-lg-6"></div>
      <p id="dateout"></p>
      <p id="locationout"></p>
      <p id="textboxout"></p>
    </div>
  </div>

  <script>
    // If you script is located after all the HTML, then it is unecessary to set up a
    // DOMContentLoaded event listener because, at this point, the DOM is loaded.
    document.getElementById("select").addEventListener("change", start);
    
    // Get the references to the DOM elements you'll be using just once:
    var blue = document.getElementById("blue");
    var white = document.getElementById("white");
    var red = document.getElementById("red");
    
    // You need a reference to the form, not the submit button, because it's the 
    // submit event of the form that you'll need to cancel later.
    var form = document.querySelector("form"); 
    
    var dateout = document.getElementById("dateout");
    var date = document.getElementById("date");
    var locationout = document.getElementById("locationout");
    // location is a Global property of window, don't use it as a variable name
    var loc = document.getElementById("location");
    var textboxout = document.getElementById("textboxout");
    var textbox = document.getElementById("textbox");    
    
    // You were setting the button's event handler in all cases, so it doesn't
    // belong in an "if". Also, the button is a submit button, so handle the submit event
    // of the form, not the click event of the button
    form.addEventListener("submit", uhjeff);

    //main algorithm
    function start(e) {
      // There is no reason to cancel the "change" event of the select.
      // Also, since all this function does is call short(), just make this
      // function have the contents of short()
      
      // Since this is the change event handler for your select, you can access
      // the select with the keyword "this"
      if (this.value == 1) {
        // You initially set the elements to be disabled with the disabled HTML attribute.
        // To avoid confusion, modify the attribute, not the JavaScript property.
        red.removeAttribute("disabled");
        white.removeAttribute("disabled");
        blue.removeAttribute("disabled");
      } else {
        red.setAttribute("disabled", "disabled");
        white.setAttribute("disabled", "disabled");
        blue.setAttribute("disabled", "disabled");
      }
    }
    
    function uhjeff(e) {
      e.preventDefault(); // .preventDefault() is a method, you need to add () after it.

      // .innerHTML is for setting/getting strings that contain HTML
      // Use .textContent when working with strings that don't have HTML
      dateout.textContent = date.value;
      locationout.textContent = loc.value;
      textboxout.textContent = textbox.value;
    }
  </script>
</body>
</html>
    推荐文章
    aliezaheer  ·  AddEventListener不适用于一个元素[重复]
    2 年前
    makerbaker  ·  取消选中框Javascript后重置输入值?
    2 年前
    Cain Nuke  ·  如何使事件侦听器在元素添加到DOM(纯js)后继续工作
    2 年前
    Bumboobee  ·  错误Uncaught TypeError:无法读取分离文件中null的属性(读取'addEventListener')
    3 年前
    aguywithquestions  ·  微调器加载动画页面加载后不会消失
    3 年前
    Abrar  ·  Javascript颜色对比度查找器
    3 年前
    YannB  ·  如何为嵌套元素添加一个事件侦听器
    6 年前
    S16  ·  使用普通JavaScript屏蔽名字和姓氏
    6 年前
    aman  ·  为什么要在脚本末尾执行Sourceopen事件侦听器?
    7 年前
    blake mcgarry  ·  如何使两个事件侦听器都工作
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号