CODEWITHSUNDEEP
javascripthtml
Erik J
Erik J

Reputation: 57

Trouble with .innerHTML method not returning string values

I am trying to use an if/ else if /else statement to return a string based on numeric values. In the HTML is returning the numeric value and in the console, it is returning the correct string. Not sure what I am doing wrong.

index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="index.css">
    <title>Calculator</title>
</head>
<body>
    <h1>Scripted CC Calculator</h1>
    <label>Word Count
      <input id="wordCount" type="text" name="wordCount" placeholder="Word Count" oninput="calc()"/>
    </label>
        <label>Key Words
      <input id="keyWords" type="text" name="keyWords" placeholder="Keywords" oninput="calc()"/>
    </label>
        <label>Hosted Pages
      <input id="hostedPages" type="text" name="hostedPages" placeholder="Hosted Pages" oninput="calc()"/>
    </label>
    <label>Cost
      <input id="results" />
    </label>
    <label>Month to Month Cost
      <input id="monthlyResults"/>
    </label>
    <label>Savings By Going Yearly
      <input id="savings"/>
    </label>
    <label>Plan Level
      <input id="planLevels" name="planLevels" type="text" placeholder="Plan Level"/>
    </label>
  <script src="index.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>

index.js code:

    function calc() {

    var wordCounts = document.getElementById('wordCount').value 
    var keyWordss = document.getElementById('keyWords').value 
    var hostedPagess = document.getElementById('hostedPages').value 
    var results = document.getElementById('results')


    var myResult = (((wordCounts * .14)/.35) + ((hostedPagess * 50)/.35) + ((keyWordss * 1)/.35))
    results.value = myResult.toFixed(2)
    var monthlyResults = document.getElementById('monthlyResults')
    var myMonthlyResults = myResult * 1.25
    monthlyResults.value = myMonthlyResults.toFixed(2)
    var savings = document.getElementById('savings')
    var mySavings = (myMonthlyResults - myResult) * 12
    savings.value = mySavings.toFixed(2)

    var planLevels = document.getElementById("planLevels")
    planLevels.value = results.value

    if(planLevels.value <= 1499){
        planLevels.innerHTML = 'Silver'
    }else if (planLevels.value<= 2699){
        planLevels.innerHTML = 'Gold'
    }else{
        planLevels.innerHTML = 'Platinum'
      }
    console.log(planLevels.value)
   }

It shows the value in the console, but not in the input field. showing the values

Upvotes: 1

Views: 954

Answers (2)

Travis
Travis

Reputation: 98

Try changing planLevels.value itself instead of planLevels.innerHTML, as planLevels.value is what's actually displayed.

Upvotes: 0

xianshenglu
xianshenglu

Reputation: 5319

input element show its content by value not innerHTML.if you want change the content,you should change the value.

i don't know why do you want to change the innerHTML,it wouldn't show outside.it only show the value attribute

if(planLevels.value <= 1499){
    planLevels.innerHTML = 'Silver'
}else if (planLevels.value<= 2699){
    planLevels.innerHTML = 'Gold'
}else{
    planLevels.innerHTML = 'Platinum'
  }
console.log(planLevels.value)

the code should be :

if(planLevels.value <= 1499){
    planLevels.value = 'Silver'
}else if (planLevels.value<= 2699){
    planLevels.value= 'Gold'
}else{
    planLevels.value= 'Platinum'
}
console.log(planLevels.value)

Upvotes: 1

Related Questions