Can't Get JavaScript Forms To Access Value and Send Alert

Question

I was messing around with forms, and I was working with a JSfiddle, and I couldn't get the page to return an alert.

Here is my HTML:

<form>
<input type="text" id="first"></input>
<input type="text" id="last"></input>
<input type="button" value="Submit" onClick="construct()"></input>
</form>

Here is my JavaScript:

function construct() {
var firstName = document.getElementById("first").value;
var lastName = document.getElementById("last").value;
alert("Welcome to the party " + firstName + " " + lastName + "!");
}

And I can't tell why it is not returning a value. Any help is appreciated! Oh and here is the fiddle: http://jsfiddle.net/nickpalmer789/4DJ4e/1/ Thanks!

epascarello · Accepted Answer · 2013-11-08 14:50:28Z

1

Because the fiddle is set up to run onload so the function is not available in global scope. Either change it to run in the head or on the body

enter image description here

or attach the event handler in a non obtrusive way.

document.getElementsByTagName("button")[0].onclick = construct;

edited Nov 8, 2013 at 14:50

answered Nov 8, 2013 at 14:44

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

4 Comments

Nick P Over a year ago

Can you explain how to do this, so that I can make it in a regular javascript file?

epascarello Over a year ago

Explain how to go into the drop down and select the other option as shown in the image above?

Nick P Over a year ago

Sorry, I meant what do the different options mean?

epascarello Over a year ago

Read the docs: doc.jsfiddle.net/basic/…

Brad Christie · Accepted Answer · 2013-11-08 14:44:25Z

0

You need to change onload (top left) to no wrap - in <head>. You're interfering with scope, so construct() isn't declared in the global scope (which the onclick attribute is looking for).

Otherwise, declare it as window.construct = function(){ ... }

As an aside, you should really be keeping markup and javascript separated. that is to say don't use the on* attributes of elements, and instead bind to them within javascript. Something like:

<!-- give n ID to the button -->
<input type="submit" value="Submit" id="submit-btn" />

<script>
  // grab the button (using the ID)
  var submitBtn = document.getElementById('submit-btn');
  // attach en event handler for click
  submitBtn.addEventListener('click', function(){
    // construct() code goes here
  });
</script>

answered Nov 8, 2013 at 14:44

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

2 Comments

Nick P Over a year ago

Can you explain to me what the difference between all of the different options on that menu are used for?

Brad Christie Over a year ago

@NickP: onLoad, onDomReady, no wrap - in <head> just places it directly in the <head> of the document, and no wrap - in <body> places in within the <body> tag.

Quentin · Accepted Answer · 2013-11-08 14:44:52Z

0

construct is defined inside another function, so it isn't a global and isn't accessible to intrinsic event attributes.

Don't use intrinsic event attributes, bind your event handlers with JS.

document.querySelector('input[type="button"]').addEventListener('click', construct);

Such: http://jsfiddle.net/4DJ4e/3/

answered Nov 8, 2013 at 14:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Can't Get JavaScript Forms To Access Value and Send Alert

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related