CODEWITHSUNDEEP
javascripthtml
Aria Ghasemi
Aria Ghasemi

Reputation: 35

How to make a user set variable, then place it in html?

I am trying to make a travel website for a school project, and for the purchase part, I need to use functions to see what package the customer chooses and then display the price. But I seem to have issues getting the variables or the onclick working.

function userSetPack(uInput) {
  var input = document.getElementById("uInput").value;
  document.getElementById('cost').innerHTML = 'input';
}
<form>
  <label>Select list</label>
  
  <select id="myList">
    <option onclick="userSetPack(uInput)" id="One" value="1">Package One </option>
    <option onclick="userSetPack(uInput)" id="Two" value="2">Package Two</option>
    <option onclick="userSetPack(uInput)" id="Three" value="3">Package Three</option>
  </select>

  <button onclick="userSetPack(uInput)">Submit</button>
</form>

<p id="cost"></p>

I am very new to JS so I truly have no clue if this is correct, I gathered up this info from SoloLearn and StackOverflow posts.

Upvotes: 0

Views: 47

Answers (3)

Mamun
Mamun

Reputation: 68933

You should attach the event to select's onchange attribute. Also it is better to use innerText or textContent when the string is not htmlString.

Try the following way:

function userSetPack(uInput) {
  var input = uInput.value;
  document.getElementById('cost').textContent = input;
}
<form>
  <label>Select list</label>
  <select id="myList" onchange="userSetPack(this)">
    <option id="One" value="1">Package One </option>
    <option id="Two" value="2">Package Two</option>
    <option id="Three" value="3">Package Three</option>
  </select>
  <button>Submit</button>
</form>
<p id="cost"> </p>

Though the preferred solution will be avoiding inline events and using addEventListener and click event like the following way:

document.getElementById('myList').addEventListener('click', function(){
  var input = this.value;
  document.getElementById('cost').textContent = input;
});
document.getElementById('myList').click();
<form>
  <label>Select list</label>
  <select id="myList">
    <option id="One" value="1">Package One </option>
    <option id="Two" value="2">Package Two</option>
    <option id="Three" value="3">Package Three</option>
  </select>
  <button>Submit</button>
</form>
<p id="cost"> </p>

Upvotes: 2

Jesper Martinez
Jesper Martinez

Reputation: 631

Another way of doing this, and It will looks like clean your HTML code.

  function userSetPack(){
    var input = document.getElementById("myList").value;
    document.getElementById("cost").innerHTML = input;
  }
  <form>
     <label>Select list</label>
    <select id="myList" onchange="userSetPack()">
      <option value="1">Package One</option>
      <option value="2">Package Two</option>
      <option value="3">Package Three</option>
    </select>
    <button type="button" onclick="userSetPack()">Submit</button>
  </form>
   <p id="cost"></p>

Upvotes: 0

baao
baao

Reputation: 73241

You generally don't use inline javascript like onclick and you never use it on an option element, as this will not work. What you should be doing is to listen to change on the select element. Furthermore, there's no element named uInput in your html. 

document.getElementById('myList').addEventListener('change', (e) => {
  document.getElementById('cost').innerText = e.target.value;
});
<form>
  <label>Select list</label>
  <select id="myList">
    <option id="One" value="1">Package One </option>
    <option id="Two" value="2">Package Two</option>
    <option id="Three" value="3">Package Three</option>
  </select>
</form>
<p id="cost"> </p>

Upvotes: 3

Related Questions