更改所选值时显示输入

Question

I am trying to choose yes value in this dropdown, so I can show another input field to add discount.

I am trying but nothing is showing. Can you please help me?

<div class="form-group m-form__group row">

  <select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
  <option value="" disabled selected >--Choose--</option>
  <option value="yes" >Yes</option>
  <option value="no">No</option>
  </select>

</div>

<div id="offer"></div>

<script>
  function myFunction() {
    if (document.getElementById('is_offer').value = 'yes') {
      document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';

    }
  }

</script>

 function myFunction() { if (document.getElementById('is_offer').value = 'yes') { document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>'; } } 

 <div class="form-group m-form__group row"> <select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required> <option value="" disabled selected>--Choose--</option> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> <div id="offer"></div> 

Answer 1

Your condition statement has issues. Use document.getElementById('is_offer').value === 'yes' (triple-equals)

Answer 2

Use .innerHTML to set the div not innerText . innerText assumes all your html data is text and adds it like a text. ,For the yes condition, = is used for assignment but we have to compare so == is used. And call the function on onchange event not on click of the select tag

 function myFunction() { if( document.getElementById('is_offer').value=='yes') { document.getElementById('offer').innerHTML='<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>'; } else document.getElementById('offer').innerHTML='' } 

 <div class="form-group m-form__group row"> <select class="form-control m-input" name="is_offer" id="is_offer" onChange="myFunction()" required> <option value="" disabled selected >--Choose--</option> <option value="yes" >Yes</option> <option value="no">No</option> </select> </div> <div id="offer"></div> 

Answer 3

function myFunction()
    {
       if (document.getElementById('is_offer').value === 'yes')
       {
           document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div></div></div>';
       }
    }

and change onclick with onChange .

Answer 4

You had 3 issues should be changed.

1. If you want to listen the change of input, you shoule use onchange instead of onclick .

2. In if condition you use assigning variables instead of comparison (use == or === ).

3. It seems you would like to change HTML content. So you should use innerHTML instead of innerText .

After fixing all of them we have code like this:

<div class="form-group m-form__group row">

    <select class="form-control m-input" name="is_offer" id="is_offer" onchange="myFunction()" required>
        <option value="" disabled selected>--Choose--</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>

</div>


<div id="offer"></div>


<script>
    function myFunction() {
        if (document.getElementById('is_offer').value === 'yes') {
            document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
        }
    }
</script>

Answer 5

Prefer to use the onchange event on the select tag. Also, you should use === to compare the value with yes or no , not just = whish is an assignment.

By using a template and cloning it, you don't have to mix your JavaScript with HTML code, you just have to fetch the template, clone it and append it to your div .

Do not query the document to find your select in your handler, you have access to it via the event.target object, which you get access to as argument to your handler.

Also, don't forget to erase the discount when you select no .

 function onSelect(event) { const offer = document.getElementById('offer'); offer.innerHTML = ''; if (event.target.value === 'yes') { const tpl = document.getElementById('discount-tpl'); const clone = document.importNode(tpl.content, true); offer.appendChild(clone); } } 

 <div class="form-group m-form__group row"> <select class="form-control m-input" name="is_offer" id="is_offer" onchange="onSelect(event)" required> <option value="" disabled selected >--Choose--</option> <option value="yes" >Yes</option> <option value="no">No</option> </select> </div> <div id="offer"></div> <template id="discount-tpl"> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div> </template>