Question

以下代码：

   $(document).ready(function () {
        $('#error_msg').hide();
    });
     //When user clicks enter button
    function clickenter() {
        text = document.getElementById('text_one').value;
        if (text == "" || text == null || text.length > 50) {
            $('#error_msg').show('slow');
            return false;
        } else {
            $('#list').append('<li>' + text + '</li><br />');
            text == "";
        }
    };
     //When user presses Enter
    document.getElementById('text_one').onkeypress = function (e) {
        if (!e) e = window.event;
        var keyCode = e.keyCode || e.which;
        if (keyCode == '13') {
            text = document.getElementById('text_one').value;
            if (text == "" || text === null || text.length > 50) {
                $('#error_msg').show('slow');
                return false;
            } else {
                $('#list').append('<li>' + text + '</li><br />');
                text == "";
            }
        }
    };
    $('#error_mssg_x').click(function () {
        $('#error_msg').hide('slow');
    });

当函数运行时，如何将文本的值设置为空？我环顾四周，看到设置它的值等于“”就可以了，但它似乎没有用。

我还想添加一个“清除”按钮，但我不太确定如何这样做。所有项都附加到这些HTML元素：

    <div id="title_box">
        <ul id="list"></ul>
    </div>

Answer 1

on text == "";

尝试只使用一个等号=

Answer 2

您应该指定text = "";

同样，要重置#list id中的值，您可以使用

document.getElementById('#list').innerHTML = "";

这将清除列表中的所有附加值。

Answer 3

document.getElementById('text_one').onkeypress = function (e) {
        if (!e) e = window.event;
        var keyCode = e.keyCode || e.which;
        if (keyCode == '13') {
            text = document.getElementById('text_one').value;
            if (text == "" || text === null || text.length > 50) {
                $('#error_msg').show('slow');
                return false;
            } else {
                $('#list').append('<li>' + text + '</li><br />');
                document.getElementById('text_one').value = "";
            }
        }
    };

Demo

编辑：由于您还要求按钮清除textbox和ul，我还添加了其他功能。查看fiddle。

<button id="clear">clear</button>

$( "#clear" ).click(function() {
    document.getElementById('text_one').value = "";
    document.getElementById('list').innerHTML = "";
});

Answer 4

将一些样品放在一起。您可能希望使用jquery选择器访问input元素，您可以使用val（）方法。设置.val（“”）会将文本设置为“空”。这里有一些示例可以帮助您入门（尝试在可能的情况下重用某些名称）。

另外你在代码中注意到你有相同的代码做同样的事情？ “if（text =”“|| ...）。我将它合并到一个函数中，通过按键或按钮点击来调用。最后放一个小提琴。

标记

<div>
    <input type="text" id="text_one" placeholder="Enter Value Here" />
    <input type="button" id="btnclick" value="Add" />
    <input type="button" id="btnclear" value="Clear List" />
</div>
<div id="ErrorMessage" style="display: none;">
    You entered an invalid value&nbsp;<span id="DismissError" style="cursor: default;">&times;</span>
</div>
<div>
    <ul id="listItems"></ul>
</div>

使用jQuery的JavaScript

$(function(){
    $("#btnclick").click(function(){
        enterValue();
    });
    $("#text_one").keypress(function(e){
        if ( e.which == 13 ) {
            enterValue();
        }
    });
    $("#DismissError").click(function(){
        hideError();
    });
    $("#btnclear").click(function(){
        clearList();
    });
});
function enterValue(){
    hideError();
    var value = $("#text_one").val();
    if(!value || value.length > 50){
        return doError();
    }
    $("#listItems").append("<li>" + value + "</li>");
    $("#text_one").val("");
}
function doError(){
    $("#ErrorMessage").show();
}
function hideError(){
    $("#ErrorMessage").hide();
}
function clearList(){
    $("#listItems").html("");
}

的jsfiddle http://jsfiddle.net/4uxaP/1/

清除文本框值并重置所有值

4 个答案: