我正在尝试建立一个简单的翻译网络应用程序(它将只是将字母更改为其他字母)。我试图在单击按钮时运行函数,但是我收到“翻译不是函数 在HTMLButtonElement.onclick“
请任何人为我提供最佳解决方案的建议。
我尝试将script标签放在head标签的body标签中。我尝试将onclick放入html中,并且尝试将事件侦听器放入javascript中作为替代/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Al Bhed Translator</title>
</head>
<body>
<div class="container-fluid padding bg">
<div class="showcase">
<div class="row align-items-center justify-content-center">
<img src="logo.png" class="logo" alt="Al Bhed Primer">
</div>
<div class="row padding justify-content-center">
<h1 class="title text-white">Welcome! What would you like to say today?</h1>
<input class="input padding col-8" id="message" type="text" name="english" placeholder="Enter your message here">
<button class="btn btn-lg btn-primary col-3" id="button" type="button" onclick="translate()">Translate</button>
</div>
<div class="row align-items-center justify-content-center">
<h1 class="title text-white"> Al Bhed</h1>
</div>
<div class="row justify-content-center">
<p class="text-white" id="alBhed">Bla bla bla</p>
</div>
</div>
</div>
<script src="alBhedPrimer.js" type="text/javascript"></script>
</body>
</html>
var engAlpha = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p",
"q", "r", "s", "t", "u", "v", "w", "x", "y", "z", " ", "\'", ".", ",", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P",
"Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
var alBhedAlpha = ["y", "p", "l", "t", "a", "v", "k", "r", "e", "z", "g", "m", "s", "h", "u", "b",
"x", "n", "c", "d", "i", "j", "f", "q", "o", "w", " ", "\'", ".", ",", "Y", "P", "l", "T", "A", "V", "K", "R", "E", "Z", "G", "M", "S", "H", "U", "B",
"X", "N", "C", "D", "I", "J", "F", "Q", "O", "W"]
var map = new Map()
for (i = 0; i< engAlpha.length; i++){
map.set(engAlpha[i], alBhedAlpha[i])
}
function translate(){
var message = document.getElementById("message").value;
var sentance = "" //item to be returned
var ignore = false;
for (i of message){
for (j of i){
if(ignore === true){
sentance += j;
} else {sentance += map.get(j);}
if(j === "'"){
if(ignore === false){
ignore = true;
continue;
}
if(ignore === true){
ignore = false;
}
}
}
}
document.getElementById("alBhed").innerHTML = sentance;
}
//The text in the <p> tag (currently bla bla bla) should change to the output text