Input box not displaying bigger value on to the users page-CodePudding

I want the programme to get the biggest number that the user has enter in one of the input boxes and display the bigger number to the user.I would also like some improvements to my code. I would it also be possible to do it with one input box instead of two

<!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>

CodePudding user response：

First of all, ECMAScript comes with a Math.max() function, so there is no need to re-implement that comparison logic.

Also, your max function doesn’t run automatically. You need to register it as an event listener on the “Submit” button using addEventListener and the click event in order to have it invoked upon clicking the button.

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>

Of course, there is not yet a validation that checks if the given values are actually numbers.

I don’t understand your request about doing it with only “one input box”, though, as determining the larger number (out of many) implies having more than one input, so please specify. Do you mean “multiple values in one input box” like comma-separated?

CodePudding user response：

Yes, you can do it all in one input please see the code below

<!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"  placeholder="Enter your numbers seperated by commas only">
    <button >Get Max</button>
    <h1 ></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>

The code takes comma separated input from the user and converts it into an array using the split function. Each value separated by the comma will be an array item. I also mapped it to convert the numbers that were in string form to integer form using the eval function. then I used the try catch block to detect any input format errors that may occur that the program will not be able to process and push an error to the user that they have used the incorrect format.

I hope that helps alot!