add text area on selecting options in dropdown list in java script

function showInsertQuest(){
    var x = document.getElementById("one");
    if (x.style.display === "none"){
        x.style.display = "block";
    } else {
        x.style.display = "block";
    }
}


const target = document.querySelector("#second");

const displayWhenSelected = (source, value, target) => {
    const selectedIndex = source.selectedIndex;
    const isSelected = source[selectedIndex].value === value;
    target.classList[isSelected
        ? "add"
        : "remove"
    ]("show");
};
if(source= document.querySelector("#location"))
source.addEventListener("change", (evt) =>
    displayWhenSelected(source, "loc5", target)
);

body {
  align-items: center;
}
#container {
  border: 4px solid;
  position: auto;
  height: 650;
  width: 700px;
}
.main {
  border-bottom: solid;
  margin-bottom: 0px;
}
h2 {
  margin-left: 10px;
  margin-bottom: 1%;
  color: darkcyan;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
#bottom {
  border-top: 0.7solid;
  margin-top: 0px;
}
button {
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 4px;
  background-color: darkcyan;
  color: white;
  height: 35px;
  width: 80px;
  margin-top: -25px;
}

/* Insert Button */

.insert-btn {
  margin-left: 0px;
  margin-top: 480px;
  color: grey;
  margin-bottom: 0px;
  padding-left: 510.53px;
  border-top: none;
  height: 40px;
  font-weight: 200;
  font-size: 1.05rem;
}


.insert-btn:hover {
  background: grey;
  box-shadow: var(--shadow);
  color: white;
}

.insert-btn:active {
  background: grey;
  color: black;
  border: transparent;
}

#one {
  width: 700px;
  position: fixed;
  margin-top: 10px;
  display: none;
}

#one input {
  width: 0px;
  border: 1px solid;
  border-radius: 5px;
  display: inline;
  padding-right: 500px;
  padding-left: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: grey;
}

#one #Multiplechoice {
  margin-right: 0px;
  display: inline;
  border: none;
  position: fixed;
  height: 19px;
}

i {
  padding-left: 12px;
  padding-right: 5px;
  padding-top: 1px;
  color: grey;
}
#one .on {
  padding-left: 9px;
}

#one #second {
  margin-left: 22px;
  margin-top: 5px;
  display: none;
}
#one #second .show {
  display: block;
}

<div id="container">
    <div class="main">
        <h2>ADD NEW CALL</h2>
    </div> 
       
    <section class="insert-quest" id="insertquestone">
        <div id="one" >
            <div class="on">
                1 <input type="text"/><i class="fa fa-adn" aria-hidden="true"></i>

                <!-- DROPDOWN -->
                <select id="location" name="drop">
                    <option value="Select">Select</option>
                    <option value="loc5" >Multi-line text</option>
                    <option value="loc6" >Single choice</option>
                    <option value="loc7">Multi choice</option>      
                </select>
            </div>
            <!-- TEXTAREA -->
            <textarea name="term" id="second" cols="50" rows="3"></textarea>        
       </div>
   </section>

    <div id="content">

        <!-- Insert Quest Button -->
        <input type="button" value="+ADD NEW QUESTION" class="insert-btn" id="insertbtn" onclick="showInsertQuest()"/>
    </div>
    <div id="bottom">
        <h3><button>SAVE</button> cancel </h3>
    </div>
</div>

UPDATE: I modified codes in your question for better readability @Adam P.

trying to get a text area on selecting multi line text from drop down list SIMAILARLY on selecting single choice add 1 text box below the question and on selecting single choice add 5 text box below the question…

getting error of Cannot read property ‘addEventListener’ of null

Answer

To make textarea visible, you’ll have to do several things:

in JS part, change

if(source= document.querySelector("#location"))

const source = document.querySelector("#location");

This change is pretty self-explanatory, you need to define node when you attach eventListener.

In CSS change:

#one #second {
  margin-left: 22px;
  margin-top: 5px;
  display: none;
}
#one #second .show {
  display: block;
}

#second {
  margin-left: 22px;
  margin-top: 5px;
  display: none;
}
#second.show {
  display: block;
}

You don’t need #one selector, one id selector is enough. Also, when you add a class (.show) to an element that already has id defined, you need to write that class without a space between id name and class name in CSS.

EDIT: You are probably loading your script in <head> tag. This way, script cannot attach eventListener, because DOM element is not available yet. To fix this and remove Cannot read property 'addEventListener' of null error, you need to load your script right before ending of </body>, like this:

<html>
    <head>
        <style></style>
    </head>
    <body>
        ...content of your web page
        <script></script>
    </body>
</html>

Advertisement

Answer