I am trying to get this alert to run after I enter a phone number. It sends the alert as soon as I open the page.
What am I doing wrong?
<p>
<label>Phone</label><br>
<input type="text" name="phone" id="phone" placeholder="###-###-####" onblur="goodLuck" />
</p>
function goodLuck(){
alert("Good Luck");
}
document.getElementById("phone").innerHTML = goodLuck();
Well,for starters, as the label element and the input element
are not text they should not be enclosed by the p element. 
Next the label element should be connected to input element
and the inline event handler should be removed…
<label for="phone">Phone</label><br>
<input type="text" name="phone" id="phone" placeholder="###-###-####">
You basic page would then look a little bit like this…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
}
form {
background-color: #fff;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<label for="phone">Phone</label><br>
<input type="text" name="phone" id="phone" placeholder="###-###-####">
</fieldset>
</form>
<script>
(function(w,d) {
'use strict';
d.getElementById( 'phone' ).addEventListener( 'blur',
function(){
console.log( 'Good Luck' );
}, false );
}(window, document));
</script>
</body>
</html>
coothead
Thanks!
No problem, you’re very welcome. 
coothead
I don’t like to disagree with you but enclosing form elements in paragraph elements is fully allowed, and is even recommended in the HTML specs. See, Writing a forms user interface
It’s been that way for at least HTML4 and HTML5.
I never said that it was not allowed. 
Rather I was pointing out that it was semantically poor coding. 
Of course, I do understand that totally ignoring semantics
seems to be the order of the day – with people wrapping
paragraphs around non-paragraph elements.
Why the W3C would advocate it’s use beggars belief. 
Unfortunately, the cancer that is frameworks will eventually
destroy bespoke coding taking all semblance of semantics
with it. 
So, until then, I will continue to suggest that if margins are
required for form elements then one should use a neutral
container such as the div element and apply appropriate
values to it in the CSS.
coothead
Ahh that is good. Your saying “should not be enclosed by the p element.” appeared to imply that it was not allowed.
All block-level elements are allowed as children of the form element, which includes fieldset, p, and div.
As the label element does supply text to the screen, that is an argument (though not my argument) for using p.
I also agree with you that using fieldset is the better way to format a form.
I’m curious. Are you talking about just front-end frameworks or are you including back-end frameworks in that, too?
Hi there Pullo,
I have no knowledge of back-end frameworks.
In this instance, it was to front-end frameworks, such
as “Bootstrap” and it’s ilk, that I was referring.
coothead
This discussion seems to be drifting a bit. For the record:
forms, I prefer fieldsets
frameworks, I think they’re best used for teams / frequent use.
Anyway, @waynecockfield because the code has = goodLuck() the function runs as soon as the browser loads the page. As you can see in coothead’s example, there is addEventListener( 'blur'
I think what can help you is to get a better understanding of “events”. There are lots and you may not want “blur” but I’m guessing you aren’t happy with the “load” event. This is a bit of a read but IMHO well worth the time spent
Maybe it’s worth mentioning that another problem is you can’t set the .innerHTML property of an input element as it doesn’t have any children – there’s no closing </input> tag for that reason. Furthermore, goodLuck() would run immediately and return undefined, which is why the alert shows right when you open the page. So your code is basically equivalent to
alert('Good Luck')
document.getElementById('phone').innerHTML = undefined
As @coothead suggests, you can add an event listener though to respond to user interactions:
var phoneEl = document.getElementById('phone')
phoneEl.addEventListener('change', function () {
alert('Good luck')
})
However, note that using alert()s is not particularly good practice as it’s modal (i.e. it blocks the whole browser until the user clicked it away), and for this reason has been abused a lot by aggressive ads and worse, which again is why you can disable showing alerts altogether on a given page… so you can’t rely on that. Another problem is that you can’t apply any styles to it, so it will always stick out from your site’s design.
So if that alert() call is for debugging purposes only, use console.log() instead. If you want to actually show a modal box, it would be better to implement your own that only blocks the current page, not the entire browser… that’s not as difficult as it sounds, here’s a pen:
OT: Now this snippet is taken directly from the bootstrap docs:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Could you please explain where this destroys semantics? :-/ If anything it enforces proper semantics IYAM…
PS: x-post… what @Mittineague said.
PPS: Ah @coothead just noticed your dedicated topic… NVM then. :-)
The reason I’m using alert() is because it is part of my assignment for Web Development class. Just trying to keep the teacher happy! 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.