Getting form values and manipulating JavaScript in the same page with those values

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form>
        <label for="text">Enter Here</label><br><br>
        <input type="text" name="text" id="inputText"/><br><br>
        <button onclick="add_elem">Show</button>
        </form>
        <script>
            var x
            function add_elem(){
            var x = document.getElementById('inputText').value;
            x.split(',');
            console.log(x);
            }
            
         </script>
     </body>
</html>

this is my code but console,log(x) shows nothing

First of all, if you are going to use inline “onclick” attribute for the button, then you must actually call the function (which you are currently not doing). Second, you need to pass the event object (see below):

onclick="add_elem(event);"

Third, you need to add a parameter representing the event object being passed to the function and then call the preventDefault method on that parameter.

I have not written out all the code for you, but you should have enough to google your way to a solution.

1 Like

Thanks googling now… :face_with_monocle:

<html>
    <head>
    </head>
    <body>
        <h1 style="text-align: center">index.html</h1>
        <div>
            <form>
                <legend style="margin-left: 50px"> chart data</legend><br>
                <input type="text" id='xdata' placeholder="enter x axis data" style="margin-left: 50px"><br><br>
                <input type="text" id="ydata" placeholder="enter y axis data" style="margin-left: 50px"><br><br>
                <button tabindex="button" id="button" style="margin-left: 50px">Submit</button>
            </form>
        </div>
        <script>
            let x = [];
            let y = [];
            function add_data(){
               var a = document.getElementById('xdata').value;
               var b = document.getElementById('ydata').value;
               x.push(a);
               y.push(b);
            }
            document.getElementById('button').onclick = function(event){
                event.preventDefault();
            };
            document.getElementById('button').onclick = function(event){
                add_data();
            };
            console.log(x);
            console.log(y);
        </script>
    </body>
</html>

tried this and also one line code at the end like this:

 document.getElementById('button').onclick = add_data(event){
                event.preventDefault();
            };

both didnt work.
anything would help at this point.
thanks and keep coding