Fatal编程技术网

Javascript 参数未定义

javascript html

Javascript 参数未定义,javascript,html,Javascript,Html,我正在制作一个刽子手游戏。在我的checkLetter函数中，我将编写代码来检查字母是否与所选单词匹配。然而，我注意到，当我将字母传递给onclick以获取函数checkLetter时，控制台日志将显示为未定义的，但它也将显示来自按下按钮的html标记集合。在函数checkLetter中，我将pickLetter作为参数传入。这是按钮工作的地方，但它也没有定义。我非常肯定我写的是正确的，但我知道有些东西遗漏了。有什么帮助吗？我希望我说清楚了 document.body.onload = crea

我正在制作一个刽子手游戏。在我的checkLetter函数中，我将编写代码来检查字母是否与所选单词匹配。然而，我注意到，当我将字母传递给onclick以获取函数checkLetter时，控制台日志将显示为未定义的，但它也将显示来自按下按钮的html标记集合。在函数checkLetter中，我将pickLetter作为参数传入。这是按钮工作的地方，但它也没有定义。我非常肯定我写的是正确的，但我知道有些东西遗漏了。有什么帮助吗？我希望我说清楚了

document.body.onload = createButtons;
//keyboard added dynamically
function createButtons() {
    const buttons = alphabet.map(letter =>
        `<button id = "${letter}" 
        class="btn btn-primary letterKey" 
        button type="button" 
        value="${letter}" 
        onclick = "checkLetter(${letter})"
        >
        ${letter}
        </button>`).join('');
    keyboardBtn.innerHTML = buttons;

    //prints letters to answer input/screen
    Array.from(document.getElementsByClassName("letterKey"))
        .forEach((e) =>
            e.addEventListener("click", () => placeLetters.innerHTML += e.value))
}

//check letter of chosen word, if its there or not
function checkLetter(pickLetter) {
    console.log(pickLetter)

}
checkLetter();






<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
        <title>Hangman 2021</title>
    </head>
    
    <body>
        
        <!--header-->
        <header class="container-fluid bg-success text-dark">
            <div>
                <span>
                    <h1 class="text-center">Hang that man</h1>
                </span>
            </div>
        </header>
        
        <div class="container">
            <br>
            <h3>Please choose a letter on your keyboard to reaveal the secret word</h3>
            <br>
            <!--each letter will display after all lives are gone-->
            <div id="keyboard"></div>
            <br>
            <br>
            <!--choices will be inserted here-->
            <div id="answer-input">
                <p id="letter-input">_ _ _ _ _ _ _ _ _ _ _ </p>
            </div>
            
            <!--number of lives will be tracked here-->
            <p id="lives">You have 8 lives left</p>
            
            <!--everytime a guess is wrong, a limb is added to animation-->
            <section class="animation">
                <div class="justify-content-center">
                    <canvas id="gallows" width="300" height="150" style="border:1px solid #d3d3d3"></canvas>
                </div>
                <button id="reset">Play Again</button>
            </section>
            <br>
        </div>
        
        <!--footer-->
        <footer class="container-fluid bg-success text-dark">
            <div class="justify-content-center">Hang that man © 2021</div>
            <div class="social justify-content-center">
                <a href="https://www.linkedin.com/in/andres-ramirez12/" target="_blank"><i class="fab fa-linkedin"></i></a>
                &nbsp;&#124;&nbsp;
                <a href="https://github.com/ARam2142" target="_blank"><i class="fab fa-github"></i></a>
            </div>
            <div class="github">
                <a>Andres Ramirez</a>
            </div>
        </footer>
        
        <script type="text/javascript"src="index.js" defer></script>
    </body>
    
    </html>

document.body.onload=createButtons；
//动态添加键盘
函数createButtons（）{
常量按钮=字母表.map（字母=>
`
${letter}
`).加入（“”）；
keyboardBtn.innerHTML=按钮；
//打印字母以回答输入/屏幕
数组.from（document.getElementsByClassName（“letterKey”））
.forEach（（e）=>
e、 addEventListener（“单击“，（）=>placeLetters.innerHTML+=e.value））
}
//检查所选单词的字母是否存在
函数校验函（pickLetter）{
console.log（pickLetter）
}
方格字母（）；
刽子手2021
绞死那个人


请在键盘上选择一个字母来重新解密这个秘密单词






字母输入法


您还有8条生命

再玩一次


绞死那个人©2021
| 
安德烈斯拉米雷斯
使用
onclick
属性通常是糟糕的设计，因为它将函数调用限制为针对全局范围进行解析的字符串表达式

该参数不在全局范围内，它只存在于
alphabet.map（）
的回调中

您应该像这样重构代码：

const alphabet='abcdefghijklmnopqrstuvxyz'。拆分（''）；
字母表。forEach（字母=>{
const btn=document.createElement（'button'）；
btn.className='btn btn primary letterKey'；
btn.type='按钮'；
btn.value=btn.innerHTML=字母；
btn.addEventListener（'单击'，（）=>检查字母（字母））；
文件.正文.附件（btn）；
});
函数校验字母（字母）{
控制台日志（信件）；
}
您是否尝试过使用：

Array.from(document.getElementsByClassName("letterKey"))
        .forEach((e) =>
            e.addEventListener("click", () => placeLetters.innerText+= e.value))
（请注意，innerHtml从html返回所有内容）您可以尝试：

  • placeLetters.textContent
  • placeLetters.innerText
  • placeLetters.value
我创建了一个带有注释的示例。您可以使用它来查看如何处理单击。我建议使用事件委派来处理单击事件，而不是26个单独的处理程序。我在下面的代码中添加了注释，因此非常清楚，但是如果您有任何问题，请告诉我。这场比赛显然还没有100%结束，但应该足够了，这样你就可以从那里开始

//将用于游戏UI的HTML元素
const btnContaineerl=document.querySelector（“btn容器”）；
const guesstrackerrel=document.querySelector（“#guess tracker”）；
const winningWordEl=document.querySelector（“#winning word”）；
//一些常量变量可以避免代码中的幻数
常量字符代码=97；
恒击直到挂起=5；
//一个变量，用于跟踪玩家需要赢得的剩余字母
让信往里走；
//用于跟踪未成功猜测的变量
让罢工=0；
initGame（）；
函数initGame（）{
getWinningWord（）；
createLetterButtons（）；
}
函数getWinningWord（）{
//从提示中获取获胜单词并创建其字母数组
lettersNeedTowin=window.prompt（“输入中奖词”）.toLowerCase（）.split（“”）.sort（）；
}
函数createLetterButtons（）{
//循环26次，为英文字母表中的每个字母创建一个按钮
for（设i=0；i<26；i++）{
const char=String.fromCharCode（char\u CODE\u a+i）；
const btnText=document.createTextNode（char）；
const buttonEl=document.createElement（“按钮”）；
追加子项（btnText）；
//将按钮附加到UI
Btncontinerel.appendChild（buttonEl）；
}
//将单击事件添加到父容器，而不是每个按钮。
btnContainerEl.addEventListener（'click'，HandletterButtonClick）；
//1个事件处理程序比26个单独的处理程序效率更高。
}
功能手柄按钮点击（e）{
如果（e.target.tagName！=“按钮”）{
返回；
}
e、 target.disabled=true；
updateGuessTracker（e.target.textContent）；
如果（包括（如target.textContent））{
while（lettersNeedTowin.includes（e.target.textContent））{
//从数组中删除这些字母（就地操作）
lettersNeededToWin.splice（lettersNeededToWin.indexOf（e.target.textContent），1）；
}
}否则{
//添加另一个打击，因为玩家猜测不正确
罢工++；
}
//检查剩余字母数和罢工次数，以确定胜负结果
如果（LettersNeedTowin.length==0）{
log（“你赢了！”）；
}否则如果（罢工==罢工直至被吊死）{
log（“你输了！”）；
}
}
函数updateGuessTracker（猜测字母）{
guessTrackerEl.innerHTML+=`${guessLetter}`；
}
获奖词：



猜字母：
我不认为这是问题所在，点击