为什么我的 javascript 代码在我设置语言选择器时不起作用？

Question

I set up a language selector to translate two language numbers, but it doesn't work, can someone check my code.我设置了一个语言选择器来翻译两个语言数字，但它不起作用，有人可以检查我的代码吗？ I use if and else code, but the code seems to get some error.我使用 if 和 else 代码，但代码似乎出现了一些错误。 I tried to fix it, but it still does not work.我试图修复它，但它仍然不起作用。 enter image description here在此处输入图像描述

<html>
<head>
 <style>
 body, input{
  font-size:20;
  }
  body{
  text-align: center;
  }
 </style>
 
    <script>
    function translate()
    {
        var digNum = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
        var freNum = ["une","deux","Trois","quatre","cinq","six","Sept","huit","neuve","Dix"];
        var gemNum = ["ein","zwei","drei","vier","fünf","sechs","Sieben","acht","neun","zehn"];
        if ("languageSelector"="French"){
        document.getElementById("output").textContent = freNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate';
        }
        else if("languageSelector"="German"){
        document.getElementById("output").textContent = gemNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate';
        }   
      return translate;
    }   

    </script>
</head>

<body>
    <h1>Amazing Translator</h1>
    <form>
    <input type="number" id="num_input" size="30" placeholder="Enter a number here" />
    </form>
    
    <br >   
     <select id="languageSelector">
      <option>French</option>
      <option>German</option>
     </select>
    <br />
    
    <br >
    <button onclick="window translate()">Translate</button>
    <br />
    
    <h2>This translate is</h2><p id="output">translate</p>

</body> 
</html>

Answer 1

In your image, the languageSelected is being identified as a variable (since it is not wrapped in quotes), but it cannot find a declaration for it anywhere, so the error is thrown.在您的图像中， languageSelected被识别为一个变量（因为它没有用引号引起来），但它无法在任何地方找到它的声明，因此抛出错误。 In the post, you are comparing two strings, which does not match, so none of the if... statements are executed.在帖子中，您正在比较两个不匹配的字符串，因此没有执行任何 if... 语句。 Also, be sure to use == or === for comparisons, and use = for assigning a value.另外，请务必使用==或===进行比较，并使用=进行赋值。

To fix: for the tags inside the section, you can add a value attribute to each.要修复：对于该部分内的标签，您可以为每个标签添加一个值属性。 <option value="x">text</option> . <option value="x">text</option> 。 Then you can simply get the selected value by selecting the tag's .value , example: document.getElementById('languageSelector').value;然后您可以通过选择标签的.value来简单地获取所选值，例如： document.getElementById('languageSelector').value;

And like the comment said, it's best to use add an event listener since I've had issues with the onclick such as 'translate() is not defined'.就像评论说的那样，最好使用添加事件侦听器，因为我遇到过 onclick 的问题，例如“translate() 未定义”。

Use the element.addEventListener("action", function) to the button.对按钮使用element.addEventListener("action", function) 。 The first argument takes in an action, with is 'click' in this case, and the second is a callback function, which we can pass in the translate function in this case.第一个参数接受一个动作，在本例中是'click' ，第二个参数是回调 function，在本例中我们可以将其传递给translate function。

Here's a code snippet to demonstrate.这是一个代码片段来演示。

 <html> <head> <style> body, input { font-size: 20; } body { text-align: center; } </style> </head> <body> <h1>Amazing Translator</h1> <form> <input type="number" id="num_input" size="30" placeholder="Enter a number here" /> </form> <br> <select id="languageSelector"> <option value="French">French</option> <option value="German">German</option> </select> <br /> <br> <button id="translate">Translate</button> <br /> <h2>This translate is</h2> <p id="output">translate</p> <script> function translate() { var digNum = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; var freNum = ["une", "deux", "Trois", "quatre", "cinq", "six", "Sept", "huit", "neuve", "Dix"]; var gemNum = ["ein", "zwei", "drei", "vier", "fünf", "sechs", "Sieben", "acht", "neun", "zehn"]; //declare a variable here that gets the values const selectedLang = document.getElementById('languageSelector').value; if (selectedLang === "French") { document.getElementById("output").textContent = freNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate'; } else if (selectedLang === "German") { document.getElementById("output").textContent = gemNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate'; } } //add an onClick event to the button, I used querySelector because it offers more flexibility, you can use any valid CSS selectors inside document.querySelector('button#translate').addEventListener("click", translate) </script> </body> </html>

为什么我的 javascript 代码在我设置语言选择器时不起作用？

问题描述

1 个解决方案

解决方案1
0 2022-04-18 23:53:40

为什么我的 javascript 代码在我设置语言选择器时不起作用？

问题描述

1 个解决方案

解决方案1 0 2022-04-18 23:53:40

解决方案1
0 2022-04-18 23:53:40