Skip to content
Advertisements

JavaScript .oninput

In this example, we will do a simple calculation program using the bir “.oninput” in event.

“.oninput” prints the result to the specified location without the need for a button when the value is entered in the object or when the value inside the object is changed.

<input type="text" id="number1">
<input type="text" id="number2">
<input type="text" id="operation" value="+">

Html: We are creating a text object to retrieve numbers from the user. We created a separate text for which action to take and we created a div to print the result on the screen. The process will perform the initial collection by default.

        var num1 = document.getElementById("number1");
        var num2 = document.getElementById("number2");
        var operation = document.getElementById("operation");
        var showN = document.getElementById("show");

JavaScript: We define objects by assigning them to variables.

        num1.oninput = showevent;
        num2.oninput = showevent;
        operation.oninput = showevent;

“.oninput” prints on the screen without having to press a button when the value is entered / changed in the input label.

We assign the “.oninput” event to objects. So when the first number is entered, it will print on the screen, and when the second number is entered, we will collect the default and collect the two numbers and print it on the screen.

function showevent(e) {
            var number1 = Number(num1.value);
            var number2 = Number(num2.value);
            if (operation.value== "+") {
                showN.innerHTML = number1+number2;
            } else if (operation.value == "-") {
                showN.innerHTML = number1-number2;
            } else if (operation.value == "/") {
                showN.innerHTML = number1/number2;
            } else if (operation.value == "*") {
                showN.innerHTML = number1*number2;
            } else {
                showN.innerHTML == "Unidentified Operator";
            }
        }

After you convert objects to numbers, we write the codes that will be applied to the operators and let them be shown inside the div object that we define. If an operator other than the specified operators is used, the message “Unidentified Operator Belir will be displayed on the screen.

ALL CODES

 <!DOCTYPE html>
<html>
<head>
    <style>
        input {
            display: block;
            margin: 10px;
        }

        #goster {
            width: 152px;
            height: 35px;
            margin: 10px;
            border: 1px solid #848484;
            background: #EDEDED;
            padding: 3px;
        }
    </style>
</head>
<body>
    <input type="text" id="number1">
    <input type="text" id="number2">
    <input type="text" id="operation" value="+">


    
        var num1 = document.getElementById("number1");
        var num2 = document.getElementById("number2");
        var operation = document.getElementById("operation");
        var showN = document.getElementById("show");

        num1.oninput = showevent;
        num2.oninput = showevent;
        operation.oninput = showevent;

        function showevent(e) {
            var number1 = Number(num1.value);
            var number2 = Number(num2.value);
            if (operation.value== "+") {
                showN.innerHTML = number1+number2;
            } else if (operation.value == "-") {
                showN.innerHTML = number1-number2;
            } else if (operation.value == "/") {
                showN.innerHTML = number1/number2;
            } else if (operation.value == "*") {
                showN.innerHTML = number1*number2;
            } else {
                showN.innerHTML == "Unidentified Operator";
            }
        }

    
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: