how to Print out variable?-CodePudding

I'm really new to JS. I am working on the if else statement and returning the total using the button. I also want to return some other input from HTML file also using the same button or on the same function as my calculate function. How do I return the total amount, name(input), number(input), from html to that one button as well?

If you don't get my question please run the code and see that it is not printing out the other input value. Thank you for helping me out.

function calculate() {
  var total
  var kwh = parseFloat(document.getElementById("kw").value);

  if (kwh <= 50) {
    total = (kwh * 500);
  } else if (kwh <= 100) {
    total = kwh * 1000;
  } else {
    total = kwh * 2120;
  }

  document.getElementById("total").innerHTML = total;
}

<body>
  <div>
    <label>ឈ្មោះអតិថិជន:</label>
    <input id="name" type="text" placeholder="ឈ្មោះអតិថិជន">
  </div>

  <div>
    <label>ឈ្មោះអតិថិជន:</label>
    <input type="number" placeholder="លេខអតិថិជន">
  </div>

  <div>
    <label>ឈ្មោះអតិថិជន:</label>
    <input type="number" placeholder="kwh" id="kw">
  </div>
  <button type="button" onclick="calculate()">គណនា</button>

  <p>Result: <span id="total"></span></p>
  <p>Name: <span id="name"></span></p>

  <!-- <script src="script2.js"></script> -->
</body>

CodePudding user response：

You are very close just need a few tweaks.

You shouldn't repeat ids, so in that case, to make it easier to understand, we can rename the input with id name to name_input, so you can retrieve its value as

document.getElementById('name_input').value

You can add that to your function and assign it to the innerHTML of name inside the function calculate() and so on with as many actions as you want

Working snippet:

function calculate() {
  var total
  var kwh = parseFloat(document.getElementById("kw").value);

  if (kwh <= 50) {
    total = (kwh * 500);
  } else if (kwh <= 100) {
    total = kwh * 1000;
  } else {
    total = kwh * 2120;
  }

  document.getElementById("total").innerHTML = total;
  document.getElementById("name").innerHTML = document.getElementById("name_input").value;
}

<body>
  <div>
    <label>ឈ្មោះអតិថិជន:</label>
    <input id="name_input" type="text" placeholder="ឈ្មោះអតិថិជន">
  </div>

  <div>
    <label>ឈ្មោះអតិថិជន:</label>
    <input type="number" placeholder="លេខអតិថិជន">
  </div>

  <div>
    <label>ឈ្មោះអតិថិជន:</label>
    <input type="number" placeholder="kwh" id="kw">
  </div>
  <button type="button" onclick="calculate()">គណនា</button>

  <p>Result: <span id="total"></span></p>
  <p>Name: <span id="name"></span></p>

  <!-- <script src="script2.js"></script> -->
</body>