无法清除输入框：多种尝试无效的出租车计价器页面技术问询

问题根源 #

你之前尝试的km = null、persons = null都是在操作从输入框读取的数值变量，这些变量只是输入框值的副本，修改它们根本不会影响页面上的输入框。要清空输入框，必须直接操作对应的DOM元素的value属性。

修复方案 #

1. 在calci函数中，从VarOfElements()的返回值里解构出输入框的DOM对象inp1和inp2（这两个对象已经在VarOfElements中定义并返回，只是你之前没解构出来）
2. 在clear函数里，通过给这两个DOM对象的value赋值为空字符串，实现清空输入框的效果

修改后的核心代码片段 #

function calci() {
    // 新增解构输入框DOM对象inp1、inp2
    const {routePrice, km, persons, output, inp1, inp2} = VarOfElements();
  
    const condExceededPersons = persons > 4;
    const condPersonsCosts = persons === 4 && km > 0;
    const condNonePersonsCosts = persons < 4 || !isNaN(persons);
  
    if (condExceededPersons) {
      output.innerHTML = "Only four persons can drive with you!";
      setTimeout(clear,3500);
      function clear() {
        output.innerHTML = "Please enter adequate informations";
        // 直接操作输入框的value属性清空内容
        inp1.value = "";
        inp2.value = "";
      } 
      return;
    }
    // 其余代码保持不变...
}

完整可运行代码 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script>
function calci() {
    const {routePrice, km, persons, output, inp1, inp2} = VarOfElements();
  
    const condExceededPersons = persons > 4;
    const condPersonsCosts = persons === 4 && km > 0;
    const condNonePersonsCosts = persons < 4 || !isNaN(persons);
  
    if (condExceededPersons) {
      output.innerHTML = "Only four persons can drive with you!";
      setTimeout(clear,3500);
      function clear() {
        output.innerHTML = "Please enter adequate informations";
        inp1.value = "";
        inp2.value = "";
      } 
      return;
    } else if (condPersonsCosts) {
      var personsExpenses = 5;
    } else if (condNonePersonsCosts) {
      personsExpenses = 0;
    }
    const noInput = isNaN(km);
    if (noInput) {
      output.innerHTML = "Please enter a distance"; 
      return;
    }
    const conditionSevenO = km <= 7 && km > 0;
    const overSevenOeq = km > 7 && km > 0;
  
    if (conditionSevenO) {
      y = 3.9
      var wholeExpenses = routePrice * km + y + personsExpenses;
      output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
    } else if (overSevenOeq) {
      y = 3.9
      let sevenLess = km - 7;
      let overSevenRoute = 1.65;
      let overSeven = sevenLess * overSevenRoute;
      let seventhExpenses = 16.10;
      wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
      output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
    }
  }
  
function VarOfElements() {
    var routePrice = 2.3;
    const inp1 = document.getElementById('input-box1');
    const inp2 = document.getElementById('input-box2');
    const km = parseInt(inp1.value);
    var persons = parseInt(inp2.value);
    output = document.getElementById('output-box');
    return {routePrice, km, persons, output, inp1,inp2};
  };
</script>
</head>
<style>
.body {
    display: flex;
    justify-content: center;
    font-family: 'Padauk', sans-serif;
}

#heading {
    color: rgba(130, 195, 236, 1);
}

#boxes {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 20vh;
    align-items: center;
    gap: 30px;
}

#input-box1:focus, #input-box2:focus {
   border: none;
    box-shadow: rgb(10, 126, 179) 0 0 10px ;
}

#boxes>*:nth-child(4) {
 margin-top: 1vh;
}

#boxes>*:nth-child(5) {
    margin-top:-1vh;
   }

   .input {
    background-color: rgba(152, 187, 209, 0.386);
    border: 1px solid;
    border-radius: 5px;
    border-color: rgba(130, 195, 236, 1);
}

.box {
    width: 32vh;
    height: 5vh;
    text-align: center;
}

#output-box {
border: 1px solid;
border-radius: 30px;
border-color: rgb(10, 126, 179);
background-color: rgba(64, 143, 193, 0.453);
color: rgba(29, 2, 54, 0.311);
line-height:40px;
text-align: center;
box-shadow: blueviolet 0 0 10px;
}

::placeholder {
    color: rgba(0, 0, 0, 0.232);
}
#button {
    border: 1px solid;
    border-radius: 5px;
    background-color: rgba(152, 187, 209, 0.386);
    border-color: rgba(130, 195, 236, 1);
    color: rgba(52, 160, 228, 0.588);
    box-shadow: 0 0 10px rgba(130, 195, 236, 1);
    cursor: pointer;
}

#button:hover {
    color: white;
}
</style>
<body>
  <div id="boxes">
    <h1 id="heading"> Taximeter</h1>
    <label class="labels" id="km" for="input-box1">km</label>
    <input oninput="this.value = Math.abs(this.value)" min="0" placeholder="How far is your target?" id="input-box1"
    class="box input" type="number">
    
    <label class="labels" id="personen" for="input-box2"> Passengers </label>
    <input min="0" max="4" oninput="this.value = Math.abs(this.value)" min="0"
    placeholder="How many people are driving with you?" id="input-box2" class="box input" type="number">
    
    <label class="labels" id="Preis" for="output-box">Price</label>
    <output placeholder = "Please enter informations" class="box" id="output-box"></output>
    
    <button onclick="calci()" id="button"> calculate!</button>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Özgür Sahin