Bdtjtk

I am creating a express app with a booking form using ejs and adding functionality inside it. it's used as a payment.

I have a select tag and stored it's selected text inside of a variable. Console logging it gives the value but using it in the actual code gives an error that says it's undefined.

What I need is to take the value of the selected input, for example 2 and multiply it to the tour.price amount, for example 34000 so the total would be 68000 and put inside the addCommas() Amount: $ <%= addCommas(34000 * 2) %> //the total should be 68000 then the function addCommas() which would make it 68,000.

I tried using Scriptlet' tag of ejs and put this code on top of the file

<%let selectedText = document.querySelector("#numOfPersons")%>

<%let valueOfSelected = selectedText.options[selectedText.selectedIndex].value %>    

<form>

     <div>

        <label for="numOfPersons">Number of Persons</label>

        <select id="numOfPersons">

          <option>2</option>

          <option>3</option>

          <option>4</option>

          <option>5</option>

          <option>6</option>

        </select>

      </div>



     Amount: $  <%= addCommas(tour.price * valueOfSelected) %> //addCommas() is a function that takes a number and adds comma every three numbers, ex: 100000 will become 100,000.

// tour.price is the total amount of the product. It's a Number. it's current value is 34000

</form>

It says that valueOfSelected is not defined.
my second attempt is adding
<%let selectedText = document.querySelector("#numOfPersons")%>
<%let valueOfSelected = selectedText.options[selectedText.selectedIndex].value %> below the form tag but it also says not defined.

Then I tried adding script tag below the file
<script>
let selectedText = document.querySelector("#numOfPersons");
let valueOfSelected =
selectedText.options[selectedText.selectedIndex].value;
</script>

and then for my final attempt, I do this.

let totalAmount = tour.price * Number(valueOfSelected);
document.querySelector("#total").innerHTML = "Amount: $ <%= addCommas(totalAmount) %>"

All come out as not defined

The expected result should output a total price of $68,000 when <%= addCommas(tour.price * valueOfSelected) %> is called

P.S. For some reason, I cannot create another code block using 4 spaces.

Whatever DOM operations like getting selected text cannot be written directly in ejs file. You have to do that inside the script tag(i.e. using js) as in your second approach.

Inside the script try getting values after the document is loaded:

<script>

function addCommas() { // implement the function here }

document.addEventListener("DOMContentLoaded", function(event) { 

  // get values here like the `valueOfSelected`

  var tourPrice = "<%= tour.price %>";



  var valueWithCommasAdded = addCommas(tourPrice * valueOfSelected);

  var content = document.createTextNode("Amount: " + valueWithCommasAdded);



  // Finally append to the form

  document.forms[0].appendChild(content);



});

</script>

You have to do this way because you have to wait for the document to load fully. The ejs will have loaded already before you can get value from the DOM. You have to do the calculation dynamically with javascript and place in the DOM.