Tried to create an Others option in a drop down menu, which by doing so, activates a textbox to type in. However, my current method of doing this causes the remaining options to be invisible when clicked, and the textbox does not appear when the Others option is clicked.

function disappear(val) {
  var textbox = document.getElementById('issue');
  if (val == 'other') {
    textbox.style.display = 'block';
  } else {
    textbox.style.display = 'none';
  }
}

<select name="issue" id="issue" onchange='disappear(this.value)'>
  <option disabled selected></option>
  <option value="bug">Bug</option>
  <option value="lacking">Lack of Use</option>
  <option value="other">Other</option>
</select>
<div id="textbox"></div>

CodePudding user response：

you are selecting the wrong element

var textbox=document.getElementById('textbox');

function disappear(val){
          var textbox=document.getElementById('textbox');
          if(val=='other'){
            textbox.style.display='block';
          }
          else{
            textbox.style.display='none';
          }
        }

#textbox{
width:90px;
height:60px;
background-color:red;
display:none;
}

<select name="issue" id="issue" onchange='disappear(this.value)'>
          <option disabled selected></option>
          <option value="bug">Bug</option>
          <option value="lacking">Lack of Use</option>
          <option value="other">Other</option>
</select>
<div id="textbox"></div>

CodePudding user response：

that's how you must do it:

 var textbox=document.getElementById('textbox');

CodePudding user response：

You're really close! The only thing left is to change the id in the document.getElementById to the correct element and add the input field with the styling.

function disappear(val) {
  var textbox = document.getElementById('textbox');
  if (val == 'other') {
    textbox.style.display = 'block';
  } else {
    textbox.style.display = 'none';
  }
}

<select name="issue" id="issue" onchange='disappear(this.value)'>
  <option disabled selected></option>
  <option value="bug">Bug</option>
  <option value="lacking">Lack of Use</option>
  <option value="other">Other</option>
</select>
<input id="textbox" type="text" style="display: none;">

CodePudding user response：

1. Should your textbox actually be a textarea element? Note: if it's meant to be a div it won't appear on the page (unless you style it) because its content is empty.

2. Use CSS to initialise the textbox display to none.

3. In the function you've picked up the select element with your query, and not the textbox element which is why the options are disappearing when you set the display to none. Maybe add an additional check to see if the style is set to block before you set the display to none.

function disappear(val) {
  var textbox = document.getElementById('textbox');
  if (val == 'other') {
    textbox.style.display = 'block';
  } else {
    if (textbox.style.display === 'block') {
      textbox.style.display = 'none';
    }
  }
}

#textbox { display: none; }

<select name="issue" id="issue" onchange='disappear(this.value)'>
  <option disabled selected></option>
  <option value="bug">Bug</option>
  <option value="lacking">Lack of Use</option>
  <option value="other">Other</option>
</select>
<textarea id="textbox"></textarea>