Validating a text box

JavaScript
1

I have a text box

<input type="text"  id="number_one" placeholder="Please Enter a Number (1-5)" onBlur="checkInput(first)">

I’m trying to ensure the value entered is a number between 1 & 5 so I thought Id run a function using the onblur event of it
Heres the function…

var first = document.getElementById("number_one").value;

function checkInput(value) {
	 
	value = Number(value);
	
	if(isNaN(value) || (value > 5 || value < 1)){
	  alert("Enter a number between 1 & 5");
	}
}

But it shows the alert no matter what I enter in the text box.
I thought I set this up right?

What did I miss?

Thanks…

2

If I’m seeing this correctly, it looks like the code logic flow is.
var first = document.getElementById("number_one").value;
IOW, whatever the value of “number_one” is at that time will be assigned to the variable “first”

the input has
onBlur="checkInput(first)
IOW, on blur the “first” variable will be passed to the “checkInput” function.

The function then uses the value of that variable

See the problem?

3

ok, changed the variable to

var first = document.getElementById("number_one");

So when I make the function call

onBlur="checkInput(first)"

it passes the value of the variable, heres the function

function checkInput(value) {
	 		
	if(isNaN(value) || (value > 5 || value < 1)){
	  alert("Enter a number between 1 & 5");
	}
}

Why does the alert thing still fire when I enter a valid number (3)?

4

Hi there lukeurtnowski,

try it like this…

[code]

untitled document #number_one { width:14em; } [/code]

coothead

1 Like
5

ok, thanks.
Im trying to add an onclick function on the image to swap it out so I added this

document.getElementById("dynamic-image1").onclick = function (){
		flipImage1(this.src);
}
function flipImage1(first) {
var image1 = document.getElementById('dynamic-image1').src;
	
if (first == "1") 
image1 = images[0];
else if (first == "2") 
image1 = images[1];
else if (first == "3") 
image1 = images[2];
else if (first == "4") 
image1 = images[3];
else 
image1 = images[4];

}

where the 5 images are in the images

I thought this would work but when I see what the value of image1 is, the console says its undefined

6

Hi there lukeurtnowski,

try it like this…

<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://coothead.co.uk/images/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
    background-color:#f0f0f0;
 }
#number_one {
    width:14em;
 }
#info {
    line-height:1.6em;
 }
#dynamic-image1 {
    display:block;
    padding:0.25em;
    margin:auto;
    border:0.1em solid #999;
    box-shadow:0.25em 0.25em 0.25em #666;
    background-color:#fff;
 }
</style>
</head>
<body>
 <input type="text" id="number_one" placeholder="Please Enter a Number (1-5)">
 <div id="info">&nbsp;</div>
 <img id="dynamic-image1" src="anim6.gif" alt="">
<script>
(function() {
   'use strict';

   var images=['anim6.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif'];
   var d=document;
   var inf=d.getElementById('info');
   var pic=d.getElementById('dynamic-image1');

d.getElementById('number_one').onblur=function(){
   checkInput(this.value);
 }
function checkInput(value) {	 
   value = Number(value);
if(isNaN(value) || (value > 5 || value < 1)){
   inf.innerHTML='Enter a number between 1 & 5';
   pic.src=images[0];   
  }
else {
   inf.innerHTML='&nbsp;';
   pic.src=images[value];  
 }
 }
}());
</script>
</body>
</html>

coothead

7

thanks for your help. The assignment is supposed to have two things.
Its making sure anything input into the text box is a number from 1 to 5. And when the image is clicked, it should change so the textbox has an onblur event and the image has an onclick event. I used your first script cause the validation should throw up an alert, And on the second function, I need to use an if/else statement
Heres what i have so far

<script>
(function() {
'use strict';
	var images = [];
	images.push("images/one.gif");
	images.push("images/two.gif");
	images.push("images/three.gif");
	images.push("images/four.gif");
	images.push("images/five.gif");
	
document.getElementById("dynamic-image1").onclick = function (){
flipImage1(this.src);
}

document.getElementById('number_one').onblur=function(){
checkInput(this.value);
}
function checkInput(value) {	 
value = Number(value);
if(isNaN(value) || (value > 5 || value < 1)){
alert('Enter a number between 1 & 5');
}
} 
function flipImage1(first) {

var image1 = document.getElementById('dynamic-image1').src;
	
if (first == "1") 
image1 = images[0];
else if (first == "2") 
image1 = images[1];
else if (first == "3") 
image1 = images[2];
else if (first == "4") 
image1 = images[3]; 
else 
image1 = images[4];

}
}());
</script>

then my page only has an image, and a text box

    <img id="dynamic-image1" src="images/zero.gif" alt="">
    <input type="text"  id="number_one" placeholder="Please Enter a Number (1-5)">

Breaking it up like this seems pretty straightforward, the onblur function seems to work as expected, but nothing seems to happen when I click on the image. This doesn’t work?

document.getElementById("dynamic-image1").onclick = function (){
flipImage1(this.src);
}

Thanks a lot for your help!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.