JavaScript for-loop: how to make my number translator work?
Question
I am trying to make a number translator, translating the number from one language to another. Unfortunately, it doesn't work. What is my fault? Or have I mistaken something? Thanks a lot!
<html> <head> <title>LT3210 example: for loop</title> <script> function translate() { var engNum = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]; var chiNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]; var myEngNum = document.getElementById("num_input").value; var trans = ""; for (var i = 0; i < engNum.length; i++) { var curEngNum = engNum[i]; while(myEngNum == curEngNum){ trans = chiNum[i]; document.getElementById("output").innerHTML = trans; } } } </script> </head> <body> <h1>Number Translator</h1> <form> <input type="text" id="num_input" size="30" placeholder="Enter a number in English" /> </form> <br /> <button onclick="translate()">Translate</button> <br /> <p id="output">??</p> </body> </html>
2 answers
solution1
1 2016-03-13 13:41:15
First of all, you can't use translate as function name.
Secondly, you need to do an if statement in stead of while loop.
<html> <head> <title>LT3210 example: for loop</title> <script> function translate2() { var engNum = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]; var chiNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]; var myEngNum = document.getElementById("num_input").value; var trans = ""; for (var i = 0; i < engNum.length; i++) { var curEngNum = engNum[i]; if(myEngNum == curEngNum){ trans = chiNum[i]; document.getElementById("output").innerHTML = trans; } } } </script> </head> <body> <h1>Number Translator</h1> <form> <input type="text" id="num_input" size="30" placeholder="Enter a number in English" /> </form> <br /> <button onclick="translate2()">Translate</button> <br /> <p id="output">??</p> </body> </html>
solution2
0 2016-03-13 13:50:27
First, <button> has a property named translate , so if you want to use the global function, you have to use window.translate for it to resolve correctly.
Second, you should use textContent instead of innerHTML when dealing with non-HTML.
And third, you can dispose of both loops and make the translation a lot simpler by making use of Array.indexOf and the || operator:
var myEngNum = document.getElementById("num_input").value;
var index = engNum.indexOf(myEngNum);
// If index == -1, chiNum[index] will evaluate to undefined, so we || it with '??'
var trans = chiNum[index] || '??';
document.getElementById("output").textContent = trans;
Or, as a one-liner:
document.getElementById("output").textContent = chiNum[engNum.indexOf(document.getElementById("num_input").value)] '??';
Your code fully fixed:
<html> <head> <title>LT3210 example: for loop</title> <script> function translate() { var engNum = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]; var chiNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]; document.getElementById("output").textContent = chiNum[engNum.indexOf(document.getElementById("num_input").value)] || '??'; } </script> </head> <body> <h1>Number Translator</h1> <form> <input type="text" id="num_input" size="30" placeholder="Enter a number in English" /> </form> <br /> <button onclick="window.translate()">Translate</button> <br /> <p id="output">??</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.