Display none, block don't work on mobile. They work second click-CodePudding

I have a problem with select options with display: none, block. On PC it works, there is no problem. But on mobile, it also works, but at the second click and after 1-2 seconds. I don't know what is my mistake. I need when the user clicks yes, the place input must be display: block, price input display: none if the user clicks no the place input must be display: none, price input display: block,

My HTML

     <div >
        <div >
           <span  id="workspan">Work?</span>
               <select id="work" name="work" >
                   <option value="no" selected>No</option>
                    <option value="yes">Yes</option>
                </select>

         </div>
       <div >
           <span id="label-price" >Price</span>
            <input type="text" id="price"  />
       </div>
       <div >
          <span >Place</span>
         <input type="text" id="place" name="place"  />
     </div>
    <div >
    <button type="submit">Submit </button>
  </div>
     </div>

My JS

    work.addEventListener("click", (e) => {

            if (e.target.value == "no") {
                priceInput.style.display = "block";
                labelPrice.style.display = "block";
                placeInput.style.display = "none";
                labelPlace.style.display = "none";
            } else if (e.target.value == "yes") {
                priceInput.style.display = "none";
                labelPrice.style.display = "none";
                placeInput.style.display = "block";
                labelPlace.style.display = "block";
            }
        });

My CSS

#label-price {
    display: block;
}

#workspan {
    display: block;
}

.place {
    display: none;
}

.work-span {
    display: none;
}

CodePudding user response：

Using a change event on a select, you can toggle a class hidding whatever you want.

document.getElementById("select").addEventListener("change", () => {
  document.getElementById("example").classList.toggle("d-none");
})

.d-none{
  display:none;
}

<select id="select">
  <option selected>Show</option>
  <option>Hide</option>
</select>
<div id="example">example</div>