functionName不是HTMLButtonElement.onclick上的函数

时间:2019-05-21 15:48:40

标签: javascript html

我正在尝试建立一个简单的翻译网络应用程序(它将只是将字母更改为其他字母)。我试图在单击按钮时运行函数,但是我收到“翻译不是函数     在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

0 个答案:

没有答案