Reference Error:Undefined

Community
1

Hi all,

I’ve been stuck on this error for about a day too long! Looking for some help for vanilla javascript!

Are there any examples here or hyperlink ones that can provide getting input from a user from text-fields and displaying that input it on the same page by using a SUBMIT- type button with an id?

I don’t really need the HTML part(unless it’s the id tags), just the.JS part for reference.

I have attempted this 100% on my own, and it is 97% complete, but I had some issues with the AddEventListeners not loading properly in the HTML tags, which kept coming up with either the .js file failing to load or a Reference Error to a method that contains all the statements in the script to run.

AddEvent listerns are a fairly new method for me, but even the on-click=“MethodHere()”; in tags has neither worked as well.

If fellow front-end devs/learners in the making could provide a working example, I’d be most grateful.

2 
<html>
  <input placeholder="Enter a value">
  <button>Submit</button>
  <p></p>
  <script src="script.js"></script>
</html>

const input = document.querySelector('input');
const button = document.querySelector('button');
const p = document.querySelector('p');
button.onclick = () => p.textContent = input.value;
3

Hi there!

I’m assuming that the second box below with the const is formatted for the JS file and not between tags for HTML?

4

Yes, it is JS, and written to the script.js file.

5

Thanks,

It’s working now. It’s interesting that the querySelector object can handle multiple addEventListener methods/functions.

6

The only event object is the button. We have the other two cached so they can be queried/manipulated in the DOM. The callback function has no limitations in terms of what we can do, being as it is like any other function.