检查是否使用用户输入在数组中找到某个值

问题描述 投票:0回答:1

我目前正在学习 JavaScript 数组,并尝试编写一个允许用户输入值的小程序。从那里,一旦他们单击“检查”按钮,JavaScript 就会循环遍历数组并检查是否在其中找到该值。 如果是,则打印一条成功消息,如果未找到该值,程序会提示用户重试。

我的问题是我无法循环遍历数组来查找值。以下是我的所有代码,非常感谢您的帮助!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Check the value in the array </title>
    </head>
    <body>
        <h1>Check to see if your value is found in an array</h1>
        
        <label for="num">Enter value:</label>
        <input type="text" id="num" name="num">
        <br><br>

        <button id="sub" onclick="printValue()">Check</button>
        <br><br>
        <div id="display"></div>

        <script>
            const numbers = [58, 4, 17, 32, 24, 53, 44, 99, 70, 56, 72, 
                            43, 36, 51, 37, 46, 35, 25, 29, 64, 76, 21, 
                            82, 94, 47, 12, 19, 31, 69, 81, 20, 91, 50, 
                            3, 34, 79, 2, 27, 68, 52, 23, 22, 84, 18, 16, 
                            33, 13, 39, 77, 8];
            
            let value = document.getElementById("num");
            let output = document.getElementById("display");

            function printValue() {
                for (let i = 0; i < numbers.length; i++) {
                    if (value == i) {
                        output.innerHTML = value.value;
                        output.innerHTML = "Value was found in the array!"
                    }
                }
                output.innerHTML = "Value is not found in array, please try again";
            
            }

            value.addEventListener("keyup", function(event){
                if (event.keyCode === 13) {
                    event.preventDefault();
                    document.getElementById("sub").click();
                }
            })
            
        </script>
    </body>
</html>
javascript html arrays user-input
1个回答
0
投票

您的代码中存在一些问题:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Check the value in the array </title>
    </head>
    <body>
        <h1>Check to see if your value is found in an array</h1>
        
        <label for="num">Enter value:</label>
        <input type="text" id="num" name="num">
        <br><br>

        <button id="sub" onclick="printValue()">Check</button>
        <br><br>
        <div id="display"></div>

        <script>
            const numbers = [58, 4, 17, 32, 24, 53, 44, 99, 70, 56, 72, 
                            43, 36, 51, 37, 46, 35, 25, 29, 64, 76, 21, 
                            82, 94, 47, 12, 19, 31, 69, 81, 20, 91, 50, 
                            3, 34, 79, 2, 27, 68, 52, 23, 22, 84, 18, 16, 
                            33, 13, 39, 77, 8];
            
            let inputEl = document.getElementById("num");
            let output = document.getElementById("display");

            function printValue() {
                for (let i = 0; i < numbers.length; i++) {
                    if (inputEl.value == numbers[i]) {
                        output.innerHTML = inputEl.value;
                        output.innerHTML = "Value was found in the array!";
                        return;
                    }
                }
                output.innerHTML = "Value is not found in array, please try again";
            
            }

            inputEl.addEventListener("keyup", function(event){
                if (event.keyCode === 13) {
                    event.preventDefault();
                    document.getElementById("sub").click();
                }
            })
            
        </script>
    </body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.