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. 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>
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. In the post, you are comparing two strings, which does not match, so none of the if... statements are executed. 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>.
Then you can simply get the selected value by selecting the tag's .value, example: 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'.
Use the element.addEventListener("action", function) to the button. 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.
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>