cannot run setInterval into another function in javascript

Question

very small problem...

PROBLEM: when I run the code it does not show the input field value into div but why?

REQUIREMENT: my requirement is that the first user enters the value in the input field then when I click on the button the input value is display on the div.

CODE:

 function abc(){
            window.setInterval(()=>{
                var myForm = document.getElementById('myForm');
                var text = document.getElementById('text');
    
                text.innerText = myForm.elements['email'].value;
            }, 1);        
        }

<form id="myForm">
            <input type="number" name="email" value="[email protected]">
            <button id="btn" onclick="abc()">click On me</button>
        </form>
        <p id='text'></p>

54ka · Accepted Answer · 2020-12-01 22:20:34Z

1

You do not need "setInterval" for this action

When the button element is in form element, it defaults to the send function, which in this case refreshes the page. Thus, the contents of the field are cleaned as soon as it has been filled.

I removed the form element. Now, when a button is clicked, the contents of the input element are taken and displayed in the p element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input id="mail" type="text" name="email" value="[email protected]">
    <button id="btn" onclick="abc()">click On me</button>

    <p id='text'></p>

    <script>
        function abc() {
            var mail = document.getElementById('mail');
            var text = document.getElementById('text');
            text.innerText = mail.value;
        }
    </script>

</body>
</html>

Version with setInterval

After pressing the button "setInterval" will be activated. Every 100ms it will takes all the information from the input element and will fill it in the P element. You can write in the field and the text will immediately appear in the other element. In order not to accumulate spaces after pressing the button, I have set a line in the code that deactivates the button

function abc() {
    document.getElementById('btn').setAttribute("disabled", true);

    setInterval(() => {
        var mail = document.getElementById('mail');
        var text = document.getElementById('text');
        text.innerText = mail.value;
    }, 100);
}

<input id="mail" type="text" name="email" value="[email protected]">
<button id="btn" onclick="abc()">click On me</button>

<p id='text'></p>

edited Dec 1, 2020 at 22:20

answered Dec 1, 2020 at 21:48

54ka

3,5972 gold badges11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AR_TechGuy Over a year ago

Thank you so much bro

AR_TechGuy Over a year ago

ok I got your point but you can solve the same problem with setinterval bcz that will help me to understand the concept of setinterval

54ka Over a year ago

I added a version with "setInterval" in my post. If my answer is useful to you, you can mark this post as Accepted Answer

Collectives™ on Stack Overflow

cannot run setInterval into another function in javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related