如何修复仅运行函数的一部分的代码？

【问题标题】：How do I fix code only running one part of a function?如何修复仅运行函数的一部分的代码？
【发布时间】：2021-06-21 01:06:59
【问题描述】：

我正在尝试创建一个超级超级基础的温度转换网站，将华氏温度转换为摄氏度，将摄氏度转换为华氏温度，将开尔文转换为摄氏度，我以后可能会添加更多选项。该代码似乎只返回华氏值。我认为它正在获取输入但运行函数的错误部分？任何帮助都会很棒

// Shows Dropdown menu
function show() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
// Changes dropdown button text to the option

function celciusText() {
  document.getElementById("dropdown").innerHTML = 'Celcius ▼';
}

function fahrenheitText() {
  document.getElementById("dropdown").innerHTML = 'Fahrenheit ▼';
}

function kelvinText() {
  document.getElementById("dropdown").innerHTML = 'Kelvin ▼';
}

// Conversion Script  
function tempConvert() {
  let input = document.getElementById("tempInput").value

  if (document.getElementById("dropdown").value = 'Celcius ▼') {
    let output = (input * (9 / 5) + 32)

    document.getElementById("tempOutput").innerHTML = output + " F";

  } else if (document.getElementById("dropdown").value = 'Fahrenheit ▼') {
    let output = (input - 32) * (5 / 9)

    document.getElementById("tempOutput").innerHTML = output + " C";
  } else if (document.getElementById("dropdown").value = 'Kelvin ▼') {
    let output = (input + 273.15)

    document.getElementById("tempOutput").innerHTML = output + " C";
  } else {
    window.prompt("Invalid")
  }
};

// Reset Button 
function clearFields() {
  const clearBtn = document.getElementById("reset");
  const inputField = document.getElementById("tempInput");
  const outputField = document.getElementById("tempOutput");
  const dropDown = document.getElementById("dropdown")



  clearBtn.addEventListener('click', () => {
    inputField.value = " ";
    outputField.value = " ";
    dropDown.innerHTML = "Temperature Unit ▼";
  })
}
/* Dropdown Button */

.dropbtn {
  display: inline-block;
  padding: 10px 14px;
  color: #3485e4;
  border: 1px solid #2d71be;
  text-decoration: none;
  font-size: 14px;
  transform: translate(0px, 65px);
  line-height: 120%;
  background-color: rgba(255, 255, 255, 0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color 300ms ease;
  -moz-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
  cursor: pointer;
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: rgba(174, 221, 245, 0.3);
  color: #3485e4;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0);
  width: 145px;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content button {
  display: inline-block;
  transform: translate(0px, 45px);
  padding: 10px 14px;
  width: 145px;
  color: #3485e4;
  border: 1px solid #2d71be;
  text-decoration: none;
  font-size: 14px;
  line-height: 120%;
  background-color: rgba(255, 255, 255, 0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color 300ms ease;
  -moz-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
  cursor: pointer;
}


/* Change color of dropdown links on hover */

.dropdown-content button:hover {
  background-color: #ddd
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}


/* CSS for number input */

input[type=number] {
  display: inline-block;
  width: 50%;
  padding: 12px 20px;
  transform: translate(150px);
  margin: 8px 0;
  box-sizing: border-box;
  z-index: 1;
}


/* CSS for submit button */

input[type=button] {
  transition-duration: 0.4s;
  border: 2px solid lightseagreen;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0);
  ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  width: 85px;
  padding: 5px 6px;
  margin: auto;
  box-sizing: border-box;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: lightseagreen;
  color: white;
}


/* Output Field */

output {
  display: inline;
  width: 100%;
  padding: 10px 100px;
  margin: auto;
  border: 1px solid black;
}


/* Reset Button */

#reset {
  transition-duration: 0.4s;
  border: 2px solid rgb(178, 32, 56);
  border-radius: 5px;
  background-color: rgba(178, 255, 255, 0);
  ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  width: 85px;
  padding: 5px 6px;
  margin: auto;
  box-sizing: border-box;
  cursor: pointer;
}

#reset:hover {
  background-color: rgb(178, 32, 56);
  color: white;
}

#small {
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  transform: translate(150px, 10px)
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<div id="inputForm">
  <form id="input">
    <div>
      <a href="#" onclick="show()" id="dropdown" class="dropbtn">Temperature Unit ▼</a>
      <div id="myDropdown" class="dropdown-content">
        <button onclick=celciusText() id="celcius" href="#" type="button">Celcius</button>
        <button id="fahrenheit" onclick=fahrenheitText() type="button">Fahrenheit</button>
        <button type="button" id="Kelvin" onclick=kelvinText()>Kelvin</button>
      </div>
    </div>
    <div>
      <label id="small" for="tempInput">Input Temperature:</label> <br>
      <input type="number" id="tempInput" name="tempInput"> </br>
    </div>
    <input type="button" value="Submit" onclick=tempConvert()>
    <input type="button" id="reset" value="Reset" onclick=clearFields()>
    <output name="tempOutput" for="tempInput" id="tempOutput">
  </div>

</form>
  <body>
  <script src="script.js"></script>
  </body>
</html>

【问题讨论】：

  • if (document.getElementById("dropdown").value = Celsius ▼') - 使用==或===进行比较，赋值为=

标签： javascript html css


【解决方案1】：

这里有两个问题：-

  • 您正在分配值而不是 平等检查，即您通过 = 而不是 ==/=== 进行比较。
  • dropdown 元素上没有 value 属性。您需要使用textContent。

这是你修改后的 sn-p :-

// Shows Dropdown menu
function show() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
// Changes dropdown button text to the option

function celciusText() {
  document.getElementById("dropdown").innerHTML = 'Celcius ▼';
}

function fahrenheitText() {
  document.getElementById("dropdown").innerHTML = 'Fahrenheit ▼';
}

function kelvinText() {
  document.getElementById("dropdown").innerHTML = 'Kelvin ▼';
}

// Conversion Script  
function tempConvert() {
  let input = document.getElementById("tempInput").value
  let dropdownValue = document.getElementById("dropdown").textContent;
  if (dropdownValue === 'Celcius ▼') {
    let output = (input * (9 / 5) + 32)

    document.getElementById("tempOutput").innerHTML = output + " F";

  } else if (dropdownValue === 'Fahrenheit ▼') {
    let output = (input - 32) * (5 / 9)

    document.getElementById("tempOutput").innerHTML = output + " C";
  } else if (dropdownValue === 'Kelvin ▼') {
    let output = (input + 273.15)

    document.getElementById("tempOutput").innerHTML = output + " C";
  } else {
    window.prompt("Invalid")
  }
};

// Reset Button 
function clearFields() {
  const clearBtn = document.getElementById("reset");
  const inputField = document.getElementById("tempInput");
  const outputField = document.getElementById("tempOutput");
  const dropDown = document.getElementById("dropdown")



  clearBtn.addEventListener('click', () => {
    inputField.value = " ";
    outputField.value = " ";
    dropDown.innerHTML = "Temperature Unit ▼";
  })
}
/* Dropdown Button */

.dropbtn {
  display: inline-block;
  padding: 10px 14px;
  color: #3485e4;
  border: 1px solid #2d71be;
  text-decoration: none;
  font-size: 14px;
  transform: translate(0px, 65px);
  line-height: 120%;
  background-color: rgba(255, 255, 255, 0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color 300ms ease;
  -moz-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
  cursor: pointer;
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: rgba(174, 221, 245, 0.3);
  color: #3485e4;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0);
  width: 145px;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content button {
  display: inline-block;
  transform: translate(0px, 45px);
  padding: 10px 14px;
  width: 145px;
  color: #3485e4;
  border: 1px solid #2d71be;
  text-decoration: none;
  font-size: 14px;
  line-height: 120%;
  background-color: rgba(255, 255, 255, 0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color 300ms ease;
  -moz-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
  cursor: pointer;
}


/* Change color of dropdown links on hover */

.dropdown-content button:hover {
  background-color: #ddd
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}


/* CSS for number input */

input[type=number] {
  display: inline-block;
  width: 50%;
  padding: 12px 20px;
  transform: translate(150px);
  margin: 8px 0;
  box-sizing: border-box;
  z-index: 1;
}


/* CSS for submit button */

input[type=button] {
  transition-duration: 0.4s;
  border: 2px solid lightseagreen;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0);
  ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  width: 85px;
  padding: 5px 6px;
  margin: auto;
  box-sizing: border-box;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: lightseagreen;
  color: white;
}


/* Output Field */

output {
  display: inline;
  width: 100%;
  padding: 10px 100px;
  margin: auto;
  border: 1px solid black;
}


/* Reset Button */

#reset {
  transition-duration: 0.4s;
  border: 2px solid rgb(178, 32, 56);
  border-radius: 5px;
  background-color: rgba(178, 255, 255, 0);
  ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  width: 85px;
  padding: 5px 6px;
  margin: auto;
  box-sizing: border-box;
  cursor: pointer;
}

#reset:hover {
  background-color: rgb(178, 32, 56);
  color: white;
}

#small {
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  transform: translate(150px, 10px)
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<div id="inputForm">
  <form id="input">
    <div>
      <a href="#" onclick="show()" id="dropdown" class="dropbtn">Temperature Unit ▼</a>
      <div id="myDropdown" class="dropdown-content">
        <button onclick=celciusText() id="celcius" href="#" type="button">Celcius</button>
        <button id="fahrenheit" onclick=fahrenheitText() type="button">Fahrenheit</button>
        <button type="button" id="Kelvin" onclick=kelvinText()>Kelvin</button>
      </div>
    </div>
    <div>
      <label id="small" for="tempInput">Input Temperature:</label> <br>
      <input type="number" id="tempInput" name="tempInput"> </br>
    </div>
    <input type="button" value="Submit" onclick=tempConvert()>
    <input type="button" id="reset" value="Reset" onclick=clearFields()>
    <output name="tempOutput" for="tempInput" id="tempOutput">
  </div>

</form>
  <body>
  <script src="script.js"></script>
  </body>
</html>

【讨论】：

    【解决方案2】：
    1. 您添加了错误的计算。
    2. 另外，您正在分配值，而不是在每个 if 检查中比较值

    建议：取一个单位的温度，然后转换为任何其他单位。以我的 sn-p 为例。

    // Shows Dropdown menu
function show() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
// Changes dropdown button text to the option

function celciusText() {
  document.getElementById("dropdown").innerHTML = 'Celcius ▼';
  document.getElementById("unit").value = 'celcius';
}

function fahrenheitText() {
  document.getElementById("dropdown").innerHTML = 'Fahrenheit ▼';
  document.getElementById("unit").value = 'fahrenheit';
}

function kelvinText() {
  document.getElementById("dropdown").innerHTML = 'Kelvin ▼';
  document.getElementById("unit").value = 'kelvin';
}

// Conversion Script  
function tempConvert() {
  let input = document.getElementById("tempInput").value

  if (document.getElementById("unit").value == 'celcius') {
    let output = input;
 console.log('C '+output);
    document.getElementById("tempOutput").innerHTML = output + " C";

  } else if (document.getElementById("unit").value == 'fahrenheit') {
    let output = (9/5 *input + 32);
console.log(input + ' >F '+ output);
    document.getElementById("tempOutput").innerHTML = output + " F";
  } else if (document.getElementById("unit").value == 'kelvin') {
    let output = parseFloat(parseFloat(input) + 273.15);
console.log(input + 'K '+output);
    document.getElementById("tempOutput").innerHTML = output + " K";
  } else {
    window.prompt("Invalid")
  }
};

// Reset Button 
function clearFields() {
  const clearBtn = document.getElementById("reset");
  const inputField = document.getElementById("tempInput");
  const outputField = document.getElementById("tempOutput");
  const dropDown = document.getElementById("dropdown")



  clearBtn.addEventListener('click', () => {
    inputField.value = " ";
    outputField.value = " ";
    dropDown.innerHTML = "Temperature Unit ▼";
  })
}
    /* Dropdown Button */

.dropbtn {
  display: inline-block;
  padding: 10px 14px;
  color: #3485e4;
  border: 1px solid #2d71be;
  text-decoration: none;
  font-size: 14px;
  transform: translate(0px, 65px);
  line-height: 120%;
  background-color: rgba(255, 255, 255, 0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color 300ms ease;
  -moz-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
  cursor: pointer;
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: rgba(174, 221, 245, 0.3);
  color: #3485e4;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0);
  width: 145px;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content button {
  display: inline-block;
  transform: translate(0px, 45px);
  padding: 10px 14px;
  width: 145px;
  color: #3485e4;
  border: 1px solid #2d71be;
  text-decoration: none;
  font-size: 14px;
  line-height: 120%;
  background-color: rgba(255, 255, 255, 0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color 300ms ease;
  -moz-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
  cursor: pointer;
}


/* Change color of dropdown links on hover */

.dropdown-content button:hover {
  background-color: #ddd
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}


/* CSS for number input */

input[type=number] {
  display: inline-block;
  width: 50%;
  padding: 12px 20px;
  transform: translate(150px);
  margin: 8px 0;
  box-sizing: border-box;
  z-index: 1;
}


/* CSS for submit button */

input[type=button] {
  transition-duration: 0.4s;
  border: 2px solid lightseagreen;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0);
  ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  width: 85px;
  padding: 5px 6px;
  margin: auto;
  box-sizing: border-box;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: lightseagreen;
  color: white;
}


/* Output Field */

output {
  display: inline;
  width: 100%;
  padding: 10px 100px;
  margin: auto;
  border: 1px solid black;
}


/* Reset Button */

#reset {
  transition-duration: 0.4s;
  border: 2px solid rgb(178, 32, 56);
  border-radius: 5px;
  background-color: rgba(178, 255, 255, 0);
  ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  width: 85px;
  padding: 5px 6px;
  margin: auto;
  box-sizing: border-box;
  cursor: pointer;
}

#reset:hover {
  background-color: rgb(178, 32, 56);
  color: white;
}

#small {
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  transform: translate(150px, 10px)
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<div id="inputForm">
  <form id="input">
    <div>
    
      <a href="#" onclick="show()" id="dropdown" class="dropbtn">Temperature Unit ▼</a>
      <div id="myDropdown" class="dropdown-content">
        <button onclick="celciusText()" id="celcius"type="button">Celcius</button>
        <button onclick="fahrenheitText()" id="fahrenheit" type="button">Fahrenheit</button>
        <button onclick="kelvinText()" type="button" id="Kelvin" >Kelvin</button>
      </div>
      <input type="hidden" name="unit" id="unit" />
    </div>
    <div>
      <label id="small" for="tempInput">Input Temperature in Celcius:</label> <br>
      <input type="number" id="tempInput" name="tempInput"> </br>
    </div>
    <input type="button" value="Submit" onclick=tempConvert()>
    <input type="button" id="reset" value="Reset" onclick=clearFields()>
    <output name="tempOutput" for="tempInput" id="tempOutput">
  </div>

</form>
  <body>
  <script src="script.js"></script>
  </body>
</html>

    【讨论】：

    • 这个 sn-p 返回正确的结果并以更好的方式完成。
    猜你喜欢
    • 2021-07-22
    • 2015-01-09
    • 1970-01-01
    • 2021-11-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode