JS如何实现通过按钮从输入存入的数组中随机选值

已有的正常运行代码 #

当前你已完成的功能支持：在输入框录入球员姓名、点击添加按钮后将姓名存入数组、以无序列表形式渲染所有已添加的球员，对应代码：

<input type="text" id="wisselspelers" onkeypress="return (event.charCode == 32|| event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
<button id="opslaanBtn">Wisselspeler toevoegen</button>
<p id="opgeslagen"></p>

<script>
    document.getElementById("opslaanBtn").addEventListener("click", myFunction)
    document.getElementById("opslaanBtn").addEventListener("click", myFunction2)

    var spelers, ab1, abc2, abcd3;
    var spelers = [];

    function myFunction() {
        var input = document.getElementById("wisselspelers").value;

        spelers.push(input);

        abc2 = spelers.length;
        ab1 = "<ul>";
        for (abcd3 = 0; abcd3 < abc2; abcd3++) {
            ab1 += "<li>" + spelers[abcd3] + "</li>";
        }
        ab1 += "</ul>";
        document.getElementById("opgeslagen").innerHTML = ab1;
    }

    function myFunction2() {
        document.getElementById("wisselspelers").value = "";
    }
</script>

你尝试的错误代码 #

你新增随机选取按钮后写的逻辑如下，但运行后无法正常生效：

<button id="gekozenBtn">Kies een random wisselspeler</button>
<h1 id="gekozen"></h1>

<script>
    document.getElementById("gekozenBtn").addEventListener("click", gekozenFunction)

    // 全局执行的随机数计算
    var rand = Math.floor(Math.random() * spelers.length);
    var concat = spelers[rand];
    
    function gekozenFunction() {
        document.getElementById("gekozen").innerHTML = (concat);
    }
</script>

问题根因 #

• 随机数计算、选中值赋值的逻辑放在了全局作用域，会在页面刚加载时就执行完毕，此时spelers数组还没有存入任何值，长度为0，计算出的随机索引是NaN，最终选中值永远是undefined，后续点击按钮时不会重新计算随机值，自然无法实现随机选取效果
• 没有增加数组空值的边界判断，若用户未添加任何球员就点击随机按钮，会触发索引越界的报错

可直接运行的正确实现 #

把随机数的计算逻辑挪到点击事件的回调函数内部，每次点击按钮时重新计算随机索引，同时补充空数组的提示逻辑，完整代码如下：

<!-- 原有功能代码保留 -->
<input type="text" id="wisselspelers" onkeypress="return (event.charCode == 32|| event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
<button id="opslaanBtn">Wisselspeler toevoegen</button>
<p id="opgeslagen"></p>

<!-- 新增的随机选取功能元素 -->
<button id="gekozenBtn">Kies een random wisselspeler</button>
<h1 id="gekozen"></h1>

<script>
    // 原有初始化逻辑
    var spelers = [];
    document.getElementById("opslaanBtn").addEventListener("click", myFunction)
    document.getElementById("opslaanBtn").addEventListener("click", myFunction2)

    function myFunction() {
        var input = document.getElementById("wisselspelers").value.trim();
        // 避免空输入存入数组
        if (!input) return;
        spelers.push(input);

        abc2 = spelers.length;
        ab1 = "<ul>";
        for (abcd3 = 0; abcd3 < abc2; abcd3++) {
            ab1 += "<li>" + spelers[abcd3] + "</li>";
        }
        ab1 += "</ul>";
        document.getElementById("opgeslagen").innerHTML = ab1;
    }

    function myFunction2() {
        document.getElementById("wisselspelers").value = "";
    }

    // 修正后的随机选取逻辑
    document.getElementById("gekozenBtn").addEventListener("click", gekozenFunction)
    function gekozenFunction() {
        // 空数组提示
        if (spelers.length === 0) {
            document.getElementById("gekozen").innerText = "请先添加至少一名替补球员";
            return;
        }
        // 每次点击时重新计算随机索引
        var rand = Math.floor(Math.random() * spelers.length);
        var randomSpeler = spelers[rand];
        document.getElementById("gekozen").innerText = randomSpeler;
    }
</script>

内容的提问来源于stack exchange，提问作者Laurence Designs