Question

我正在尝试使用if / else if / else语句返回基于数值的字符串。在HTML中返回数值，并在控制台中返回正确的字符串。不确定我做错了什么。

index.html代码：

<!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代码：

    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)
   }

它显示控制台中的值，但不显示在输入字段中。 showing the values

Answer 1

输入元素按值显示其内容而不是innerHTML。如果要更改内容，则应更改该值。

我不知道你为什么要改变innerHTML，它不会显示在外面。它只显示值属性

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

代码应为：

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

Answer 2

尝试更改planLevels.value本身而不是planLevels.innerHTML，因为planLevels.value是实际显示的内容。

麻烦.innerHTML方法没有返回字符串值

2 个答案: