Question

我试图用输入字段创建一个Javascript列表以添加新名称。我的目标是拥有一个可以在其中添加新名称的名称列表。如果输入字段为空，我也不想添加任何值。

我当前的问题是，如果我添加一个新名称并按下按钮，则所有已经创建的名称会再次添加。

我不知道为什么！我对Javascript和Jquery还是很陌生。

var names = ['Peter', 'Thomas', 'Nick', 'James'];
var x = 1;

$(document).ready(function() {
    function display_array() {
        $.each(names, function(index, value) {
            $('#names').append(value + '<br />');
        });
    }
   
display_array();

    $('#insert').click(function() {
        var name = document.getElementById('name');
        if(name != ''){
        	name[x] = name;
          display_array();
        }
        x = x + 1;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="name" type="text">
<input id="insert" type="button" value='Insert new Name'>
<div id="names"></div>

Answer 1

const names = ['Peter', 'Thomas', 'Nick', 'James'];

function display_array() {
  $('#names').empty(); // Clear list before rendering
  $.each(names, function(index, value) {
    $('#names').append(value + '<br />');
  });
}
    
$(document).ready(function() {
  display_array();

  $('#insert').click(function() {
    const name = document.getElementById('name').value; // Get value of input field
    
    if(name != ''){
      names.push(name); // Push to names list
      display_array(); // Re-render list
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="name" type="text">
<input id="insert" type="button" value='Insert new Name'>
<div id="names"></div>

Answer 2

您的代码因以下三个原因而无效：

您必须使用display_array()清除$('#names').empty();上显示的名称列表，否则您将一次又一次地添加整个列表
使用var name = document.getElementById('name')，您将DOM元素设置为name。但是您需要它的价值。为此，您可以使用document.getElementById('name').value;或jQuery $('#name').val();
您想要将新名称推入数组的方式将不起作用。改用names.push(name)

我认为codecademy对于您来说很有趣，可以与JavaScript基础保持联系。它真的很酷，而且免费。：）

var names = ['Peter', 'Thomas', 'Nick', 'James'];

$(document).ready(function() {
    function display_array() {
        $('#names').empty();
        $.each(names, function(index, value) {
            $('#names').append(value + '<br />');
        });
    }
   
    display_array();

    $('#insert').click(function() {
        var name = $('#name').val();
        if(name != ''){
          names.push(name);
          display_array();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="name" type="text">
<input id="insert" type="button" value='Insert new Name'>
<div id="names"></div>

Answer 3

这是因为您总是附加个值

您应该坚持使用javascript或jquery。您的代码是两者之间的混合，这可能会让您感到困惑。

var names = ['Peter', 'Thomas', 'Nick', 'James'];
var x = 1;

$(document).ready(function() {
    function display_array() {
        $('#names').html(names.join('<br/>'));
    }

display_array();

    $('#insert').click(function() {
        var name = $('#name');
        if(name !== ''){
            names.push(name.val());
          display_array();
        }
    });
});

使用输入字段创建名称列表以添加名称

3 个答案: