从 JS 中的事件侦听器获取值

问题描述

我试图从粘贴的代码中的事件处理程序中获取 'firstInput' 和 'secondInput' 的值，但是当我运行它时，console(log) 会产生 'undefined'。你能帮忙解决这个问题吗？它按预期运行（很棒），但我似乎无法从事件处理程序中获取输入的输入值。通过 HTML 作为数字输入的输入值是我需要做的一些计算

function calc(){
    // Target input's value. Goal is to get values from input
    let firstButton = document.getElementById("button1");
    let secondButton = document.getElementById("button2");
    let pOneInput,pTwoInput;

    firstButton.addEventListener("click",(e)=>{
        let firstInput = document.getElementById("first-input").value;
        if (firstInput != parseInt(firstInput)){
            console.log("NAN");
            alert("Please enter a number");
        } else{
            console.log(firstInput);
            pOneInput = firstInput;
        }
    });

    secondButton.addEventListener("click",(e)=>{
        let secondInput = document.getElementById("sec-input").value;
        if (secondInput != parseInt(secondInput)){
            console.log("NAN");
            alert("Please enter a number");
        } else{
            console.log(secondInput);
            pTwoInput = secondInput;
        }
    });

    // Select values from input.


    // Compare values to see which is higher
    
}
calc();

<body>
    <div class="container">
        <section class="top-container">
            <div class="topdiv">
                <div><p id="title">GuessNTime</p></div>
                <div class="darktheme">
                    <input class="" type="checkBox" id="theme">
                    <label class="" for="theme">
                        Dark Theme
                    </label>
                    <span id="howtoplay">How to play</span>
                </div>
            </div>
        </section>
        <section class="middle">
            <div id="left" class="left"></div>
            <div class="lysol">
                <div class="">
                    <div class="">
                        <div id="filter" class="">
                        </div>
                    </div>
                    <div class="">
                        
                    </div>
                </div>
                <div class="themain">
                    <div id="count"><span id="twenty">20</span><span id="arraw">⇣</span></div>
                    <div class="">
                        <div class="gamevideo">
                            <video id="myvid" class="ourvid" muted></video>
                        </div>
                    </div>
                    <div class="othervideo">
                        <div id="peerDiv" class="">
                        </div>
                    </div>
                </div>
                <div class="gameBox">
                    <div class="gameplay">GameBox</div>
                    <div class="gameplay">ClueBox</div>
                </div>
            </div>
            <div id="right" class="right"></div> 
        </section>
        <section class="april">
            <div id="firstcol" class="bottomlayer">
                <p id="player1" class="goaway">Player One</p>
                <div id="firstformdiv" class="formdiv">
                        <input id="first-input" type="text" value="">
                        <input id="button1" type="button" value="Submit">
                </div>
            </div>
            <span id="replacediv"><div id="secondcol" class="bottomlayer" href="#modal"><p id="starpause">Start | Pause</p></div></span>
            <div id="thirdcol" class="bottomlayer">
                <p id="player2"  class="goaway">Player Two</p>
                <div id="secformdiv"  class="formdiv">
                        <input id="sec-input" type="text" value="" class="form-input">
                        <input id="button2" type="button" value="Submit">
                </div>
            </div>
        </section>
        <section id="qform" class="form">
            
        </section>
    </div>

解决方法

控制台使用 console.log(myVar) 而不是 console(log) 打印，但是您在代码中正确编写了它，所以没问题。
您可以使用 isNaN(var) 代替： firstInput != parseInt(firstInput)
input.value 有效。

let input = document.getElementById('myInput');
// before writing in the input
consol.log(input.value) // undefined
// after writing
consol.log(input.value) // "What I write in my input"

所以你需要在使用 .value 之前控制台 log document.getElementById("first-input") 来验证它是否被正确获取。您应该在控制台中收到一个 html 字符串，例如：

<input ... />

event-handling javascript