CODEWITHSUNDEEP
javascriptradio-buttonaddeventlistener
blake mcgarry
blake mcgarry

Reputation: 3

How to make both event listeners work

What I am trying to be is make the first event listener use it on change when you change the option and then once you fill out the form make it pop out at the bottom of the page. I can only use Vanilla Javascript. Also if you select anything other then the 5th option it will turn gray and not be able to select any of the radio buttons. Then you fillout the form and I can't have the form submit I have to have it just drop down with 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>

Upvotes: 0

Views: 42

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65808

You had several errors. Please read the HTML and JavaScript comments inline below for corrections.

<!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>

Upvotes: 1

Related Questions