JavaScript self study 2 -- change HTML image, verify number

The following example changes the image

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Rookie tutorial(runoob.com)</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>Click on the bulb to turn it on or off</p>
	
</body>
</html>

Remember to change the path and name of the picture when you type the code on your own computer
//The function of the code element.src.match("Buffon") in the above example is to retrieve the value of SRC attribute in img id = "myimage" ο nclick = "changeImage()" SRC = "/ images / PIC ο buffoff. GIF" width = "100" height = "180" > to see whether the value of SRC attribute contains the string of Buffon. If there is a string of Buffon, the image SRC is updated to buffoff.gif. If the string of Buffon does not match, the image SRC is updated to buffoff.gif Bon string, SRC is updated to bulbon.gif
This example is actually a change of two pictures

Change HTML style

Changing the style of HTML elements is a variation of changing HTML attributes.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Rookie tutorial(runoob.com)</title> 
</head>
<body>
	
<h1>My first paragraph JavaScript</h1>
<p id="demo">
JavaScript Can change HTML The style of the element.
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // Find elements
	x.style.color="#ff0000";          // Changing styles
}
</script>
<button type="button" onclick="myFunction()">click here</button>
	
</body>
</html>

Change the paragraph whose id is demo text to red font

Validation number

JavaScript is often used to validate user input.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Rookie tutorial(runoob.com)</title> 
</head>
<body>
	
<h1>My first paragraph JavaScript</h1>
<p>Please enter a number. If the input value is not a number, the browser will pop up a prompt box.</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("Not numbers");
	}
}
</script>
<button type="button" onclick="myFunction()">click here</button>
	
</body>
</html>

var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("not a number");
}I don't know how to find out whether the verification certificate is a function of numbers. After all, I can only learn. The above example is just a common verification. If you want to use it in the production environment, you need to make a strict judgment. If you enter a space or a continuous space isNaN, you can't distinguish it. You can add regular to judge

Tags: Javascript Attribute

Posted on Fri, 08 Nov 2019 13:57:41 -0500 by devangel