輸入框未在用戶頁面上顯示更大的值

Question

我希望程序獲得用戶在其中一個輸入框中輸入的最大數字並向用戶顯示更大的數字。我還希望對我的代碼進行一些改進。 我也可以用一個輸入框而不是兩個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Max number</h1>
    <input id="box1" placeholder="Enter the fist number" type="number">
    <input id="box2" placeholder="Enter the second number" type="number">
    <button >Submit</button>
    <div id="store"></div>
    <script>
        const box1 = document.getElementById('box1');
        const box2 = document.getElementById('box2');
        const store = document.getElementById('store');
        
        function max(){
            
            const element = document.createElement('div');
            const  num1 = box1.value;
            const  num2 = box2.value;

            if (num1<num2 ){
                    element.innerHTML= num2;
                    store.appendChild(element);
                }
            if (num2<num1){
                element.innerHTML= num1;
                store.appendChild(element);
            }
        }
    
    
    
    
    
    </script>
</body>
</html>

Answer 1

首先，ECMAScript 帶有一個Math.max() function ，所以不需要重新實現那個比較邏輯。

此外，您的max function 不會自動運行。 您需要使用addEventListener和click事件將其注冊為“提交”按鈕上的事件偵聽器，以便在單擊按鈕時調用它。

 const box1 = document.getElementById('box1'); const box2 = document.getElementById('box2'); const store = document.getElementById('store'); const button = document.getElementById('submit'); // upon clicking on the button … button.addEventListener('click', () => { max(); // … run `max()`` }); function max() { const element = document.createElement('div'); element.innerText = Math.max(box1.value, box2.value); store.appendChild(element); }

 <h1>Max number</h1> <input id="box1" placeholder="Enter the fist number" type="number"> <input id="box2" placeholder="Enter the second number" type="number"> <button id="submit">Submit</button> <div id="store"></div>

當然，目前還沒有檢查給定值是否真的是數字的驗證。

但是，我不理解您關於僅使用“一個輸入框”進行操作的要求，因為確定較大的數字（在許多中）意味着有多個輸入，因此請指定。 你的意思是像逗號分隔的“一個輸入框中的多個值”嗎？

Answer 2

是的，您可以在一個輸入中完成所有操作，請參閱下面的代碼

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Get largest number</title> </head> <body> <input type="text" class="myinput" placeholder="Enter your numbers seperated by commas only"> <button class="submit">Get Max</button> <h1 class="output"></h1> <script> const inputElement = document.querySelector(';myinput'). const submitButton = document.querySelector(';submit'). const outputElement = document.querySelector('.output') submitButton.onclick = function(){ let inputValue = inputElement;value. if(inputValue,== ''){ try{ let numbers = inputValue.split(';').map(e=>eval(e)). const maxNumber = Math.max(.;.numbers): outputElement;innerHTML = 'Largest Number. ' + maxNumber; }catch(e){ outputElement.innerHTML = 'Incorrect input format!'; } } } </script> </body> </html>

該代碼采用逗號分隔的用戶輸入，並使用拆分 function 將其轉換為數組。 用逗號分隔的每個值都是一個數組項。 我還映射它以使用eval function 將字符串形式的數字轉換為 integer 形式。 然后我使用 try catch 塊來檢測可能發生的程序將無法處理的任何輸入格式錯誤，並向用戶推送他們使用了不正確格式的錯誤。

我希望這有很大幫助！

輸入框未在用戶頁面上顯示更大的值

問題描述

2 個解決方案

解決方案1
1 已采納 2022-08-19 10:27:22

解決方案2
1 2022-08-19 10:51:10

輸入框未在用戶頁面上顯示更大的值

問題描述

2 個解決方案

解決方案1 1 已采納 2022-08-19 10:27:22

解決方案2 1 2022-08-19 10:51:10

解決方案1
1 已采納 2022-08-19 10:27:22

解決方案2
1 2022-08-19 10:51:10