javascript - 如何将 HTML 文本字段的输入永久存储到 jQuery 变量中？

Question

jQuery

$(document).ready(function(){ 
    var guess;
    $('#submit').on("click", function() {
        guess = $('#guess-value').val();
        $("#value").text(guess);
        alert(guess);
    });
    alert(guess);
});

HTML

<div id='game'>
    <form id='user-input'>
        <input type='text' id='guess-value' placeholder='1-100'></input>    
        <button id='submit'>Submit</button>
    </form>

    <h4 id='guess-count'>Attempts left: <span id="attempts">6</span></h4>       
</div>

<h4 id='checker'>The value entered is <span id="value">?</span></h4>

我在上面提供了 HTML 和 jQuery 代码的片段。我试图在按下提交按钮后将已输入文本字段的数字存储到名为 guess 的 jQuery 变量中。

发生以下情况:当我在字段中输入数字并按提交时，我会收到一条警报，显示我输入的值。关闭事件后，我收到另一个警报，该警报应该显示“猜测”的值，但该值未定义。

即使我在点击事件之外声明了变量“guess”，也会发生这种情况。这是为什么？如何永久存储该值？

Answer 1

您正在使用 <form>请求用户输入的元素。表单的问题在于，当它提交时，它想要离开(或刷新)页面。当页面刷新时，所有js都会丢失。

简单修复:不要使用表单(您可以使用 DIV 代替)。

或者，您可以使用 event.preventDefault() 告诉表单不执行默认的提交操作。 :

jsFiddle Demo

HTML:

<div id='game'>
    <form id='user-input'>
        <input type='text' id='guess-value' placeholder='1-100'></input>
        <button id='submit'>Submit</button>
    </form>
     <h4 id='guess-count'>Attempts left: <span id="attempts">6</span></h4> 
</div>

<h4 id='checker'>The value entered is <span id="value">?</span></h4>

<input type="button" id="myButt" value="Show Value" />

jQuery:

var guess;
$('#submit').on("click", function (evnt) {
    guess = $('#guess-value').val();
    $("#value").text(guess);
    alert(guess);
    evnt.preventDefault();
});

$('#myButt').click(function(){
   alert( guess ); 
});

进一步说明:

请注意，第二个 alert(guess)您发布的代码中的内容将在 document.ready 后立即发生。我的意思是，立即——一旦 DOM 准备好。在对任何事情进行猜测之前。 这就是为什么它返回未定义。

这可能不是您想要的。上面的代码示例添加了一个按钮，允许您在需要时查看该变量的内容。