如何抓取一个li并随机添加它

How to grab a li and append it randomly

本文关键字：li 添加 一个 随机 何抓取 抓取      更新时间：2023-09-26

我试图创建一个网站，你把你的名字输入，并按"计算"，它会采取一个随机的li与该名称，并将其附加到一个框。这是我的HTML:

<form class="newName">
            <label for="nameInput">Your Name</label>
            <input class="input-md" id="nameInput" placeholder="(e.g: John Smith)">
            <span class="btn-names">Enter...</span>
            <span class="calculate">Calculate</span>
        </form>
        <div class="namesEntered">
            <ul id="enteredNames"></ul>
        </div>
        <div class="centered">
            <h1>And The Winner Is....</h1><br><br>
            <span id="name" class="names">???</span>
        </div>

和我的JavaScript/jQuery:

$(document).ready(function(){
    $('.btn-names').on('click', function(){
        if ($('#nameInput').val() === ''){
        alert('No names have been entered');
    } else {
        var $inputted_names = $('#nameInput').val();
        var listed = '<li>'+ $inputted_names +'</li>';
        $(listed).appendTo('ul');
        $('#nameInput').val('');
    }
    });
    $('.calculate').on('click', function(){
        var tag = document.getElementsByTagName('li');
        var name = tag.innerHTML;
        var randomator = Math.floor(Math.random(tag) * name.length);
        console.log(randomator);
    });
});

您可以在http://www.b3ws.com/randomator.html查看这个示例网站但是现在还不行

首先，获取li元素的数组，如

var names = $('#enteredNames li');

然后，得到随机名称

var randomName = names.get(Math.floor(Math.random()*names.length));

最后，更改#name span

$('#name').text(randomName.innerHTML);


$(document).ready(function(){
    $('.btn-names').on('click', function(){
        if ($('#nameInput').val() === ''){
        alert('No names have been entered');
    } else {
        var $inputted_names = $('#nameInput').val();
        var listed = '<li>'+ $inputted_names +'</li>';
        $(listed).appendTo('ul');
        $('#nameInput').val('');
    }
    });
    $('.calculate').on('click', function(){
        var names = $('#enteredNames li');
        var randomName = names.get(Math.floor(Math.random()*names.length));
        $('#name').text(randomName.innerHTML);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label for="nameInput">Your Name</label>
            <input class="input-md" id="nameInput" placeholder="(e.g: John Smith)">
            <span class="btn-names">Enter...</span>
            <span class="calculate">Calculate</span>
        
        <div class="namesEntered">
            <ul id="enteredNames"></ul>
        </div>
        <div class="centered">
            <h1>And The Winner Is....</h1><br><br>
            <span id="name" class="names">???</span>
        </div>

另外，请参见从JavaScript数组中获取随机项

Replace your randomator section with this:
var randomator = Math.floor(Math.random() * tag.length); //don't need tag in random function
console.log(randomator);
$('.names').html(tag[randomator].text()); //assign the test from the random tag to the element with the names class
相关文章：