HTML/JS User inputs

Question

I am trying to retrieve a text input from an input field using html and js.

HTML

<div class="inputarea">
        <input type="text" value ='' id='myInput' placeholder="What do I need to do?"> 
        <button onclick='todolist().submit()'>SUBMIT</button>
</div>

JS

function todolist(){
    function first(){
        window.open("todolist.html")
    }
    function submit(){
        var userinput = document.getElementById('myInput').value;
        console.log(userinput);
    }
}

When I press submit the console says "Uncaught TypeError: Cannot read property 'submit' of undefined"

Any help would be much appreciated.

Sam.

Because todolist returns undefined. That is not how classes work in JavaScript — epascarello
– epascarello, Commented Mar 24, 2020 at 15:37

User863 · Accepted Answer · 2020-03-24 15:33:28Z

3

Try returning the functions

function todolist() {
  function first() {
    window.open("todolist.html")
  }

  function submit() {
    var userinput = document.getElementById('myInput').value;
    console.log(userinput);
  }
  return {first, submit};
}

<div class="inputarea">
  <input type="text" value='' id='myInput' placeholder="What do I need to do?">
  <button onclick='todolist().submit()'>SUBMIT</button>
</div>

answered Mar 24, 2020 at 15:33

User863

20.1k3 gold badges20 silver badges45 bronze badges

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

Comments

Marek Szkudelski · Accepted Answer · 2020-03-24 15:36:28Z

1

Probably todolist should be class (EcmaScript 6+). Or you ment to return object from todolist function:

function todolist(){
  return {
     first(){
        window.open("todolist.html")
    },
     submit(){
        var userinput = document.getElementById('myInput').value;
        console.log(userinput);
    } 
  }
}

todolist().submit();

answered Mar 24, 2020 at 15:36

Marek Szkudelski

1,1326 silver badges11 bronze badges

2 Comments

Samuel Wash Over a year ago

Ok ill put it into a class

Marek Szkudelski Over a year ago

@SamuelWash, Note that not every browser supports ES6 class syntax. You may need some tool like Babel to make it work on browsers like Internet Explorer. Check this out: caniuse.com/#feat=es6-class

Collectives™ on Stack Overflow

HTML/JS User inputs

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