时间戳

首页 > 解决方案 > 参数出来未定义

javascript - 参数出来未定义

问题描述

我正在构建一个刽子手游戏。在我的 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>

标签： javascripthtml

解决方案

您是否尝试过使用：

Array.from(document.getElementsByClassName("letterKey"))
        .forEach((e) =>
            e.addEventListener("click", () => placeLetters.innerText+= e.value))

（请注意，innerHtml 从 html 返回所有内容）您可以尝试：

  • placeLetters.textContent
  • placeLetters.innerText
  • placeLetters.value

推荐阅读