How to Process textbox value to variable in JavaScript

Question

I want to be able to type something into a textbox and then get an alert saying what I typed. Easy Right? I tried using getElementbyId and made some variables to accomodate with this, but it turns out it gives undefined. This is the code:

    <input type="submit" name="button" style="position: absolute; top: 283.5px; left: 45%; width: 142px; height: 40px; background-color:lime; border-color:forestgreen; font-weight:700; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif" value="CLICK ME"/>
    <div style="position: absolute; top: 283.5px; left: 23%; width: 142px; height: 40px; background-color:lime; border-color:forestgreen;">
        <input type="text" name="linksubmit" id="linksubmit" style="position: absolute; top: 10px; width:138px" />
    </div>
    <script>
        var linksubmit = document.getElementById("linksubmit").value 
        function Button() {
            alert(linksubmit)
        }
    </script>

If any of you have a valid reason why this could not be working, it would be greatly appreciated.

What is undefined, and where are you calling function Button? — Monika Mangal
– Monika Mangal, Commented Jul 16, 2019 at 16:50

kshetline · Accepted Answer · 2019-07-16 16:51:28Z

2

The value is only being captured once, before your function is called. You need something more like:

        var linksubmit = document.getElementById("linksubmit"); 
        function Button() {
            // Get the value each time the button is pressed, instead of reporting
            // an old, stale value (probably empty string/null/undefined.)
            alert(linksubmit.value);
        }

edited Jul 16, 2019 at 16:51

answered Jul 16, 2019 at 16:49

kshetline

14k6 gold badges49 silver badges96 bronze badges

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

Comments

Chris W. · Accepted Answer · 2019-07-16 16:55:54Z

1

const theThing = document.getElementById('testerooni');
showMe = () => { alert(theThing.value) };

<input id="testerooni" type="text">
<button onclick="showMe()">SHOW ME</button>

answered Jul 16, 2019 at 16:55

Chris W.

23.4k4 gold badges63 silver badges99 bronze badges

2 Comments

Chris W. Over a year ago

Looks like I was a lil late hitting the submit button, kshetline is the same thing minus es6 syntax. Upvoting his for answering speed :D

ßrilliant Over a year ago

Thank You So Much Chris You Are A Hero. You deserve an upvote too!

Collectives™ on Stack Overflow

How to Process textbox value to variable in JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related