Как заставить обоих слушателей событий работать - PullRequest
Новая
       14

Как заставить обоих слушателей событий работать

0 голосов
/ 25 апреля 2018

Я пытаюсь сделать так, чтобы первый слушатель событий использовал его при изменении, когда вы изменяете опцию, а затем, как только вы заполните форму, она появляется в нижней части страницы.Я могу использовать только Vanilla 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 Ответ

0 голосов
/ 25 апреля 2018

У вас было несколько ошибок. Пожалуйста, ознакомьтесь с 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>
...