JavaScript uses functions to set and modify the innerHtml and innerText attributes of the div box—–JavaScript

<!DOCTYPE html>
<!-- This is an HTML comment -->
<html lang="en" id="myHtml">
<head>
<!-- This does not set the encoding, but tells the browser what encoding method to use to open the file to avoid garbled characters -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
<style type="text/css">
#div1{
background-color: aquamarine;
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript" src="j.js"></script>
<table align="center">
<form id="myForm">
<tr><td>Login window</td></tr>
<tr>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>
<input type="password" id="password"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Login"/>
</td>
</tr>
</form>
</table>
<!-- The syntax of void operator is to execute the operator but not return any result -->
<!-- Let our href path disappear, just use void without returning -->
<!-- javascript:void(0) Our javascript is used to prompt the browser. This is a piece of JS code, which cannot be omitted -->
<a href="javascript:void(0)" onclick="alert('test')">The execution page does not jump</a>
<input type="button" onclick="vars()" value="123" />
<input type="button" id="auto" value="auto" />
<input type="button" id="tyo" value="tyo" />
<input type="button" value="Set the content of the div" id="btnm"/>
<div id="div1"></div>
</body>
</html>








HtmlAll



Login window




The execution page does not jump




window.onload = function()
{
document.getElementById("btnm").onclick = function()
{
//Set the content of the div
var divElt = document.getElementById("div1");
//innerHtml and innerText are not codes, but attributes. The principle is the same as when we set the value of text.
//innerHtml will treat the following string as html code and innerText as a string
divElt.innerHTML = "<font color='red'>hahahahahahahahahaha</font>";
divElt.innerText = "<font color='red'>hahahahahahahahahaha</font>";
}
document.getElementById("password").onkeydown = function(event,b)//local variable
{
//Get key value
//The key value of the Enter key is 13, and the ESC key value is 27
//For keyboard events, they all have the keyCode attribute to obtain the key value.
if(event.keyCode === 13)
{
//Recognize the Enter key and prompt that you are logging in
alert("Login")
}
}
\t
document.getElementById("myForm").onsubmit = function()
{
alert("Login")
}
\t
document.getElementById("auto").onclick = function()
{
var ui = [false,true,1,2,"abc",3.14];
for(var i = 0; i < ui.length; i + + )
{
alert(ui[i]);
}
for(var i in ui)
{
//This var i is not an element of the array, but the subscript of the array
alert(i);//Display the index that is all subscripted
alert(ui[i]);
}
}
document.getElementById("tyo").onclick = function()
{
User = function(username,password)
{
this.username = username;
this.password = password;
}
var u = new User("Zhang San","12345");
alert(u["username"] + "," + u["password"]);
//This is the index when used on an array. When used on an object, it is the attribute name of the object and returns a string.
for(var value in u)
{
//The attribute name is a string
alert(value);
//It is a string itself, just put it in directly
alert(u[value]);
}
with(u)
{
//This method is only for understanding. Do not use it as much as possible. What you see is not what you get.
alert(username + "," + password);
}
}
}

function vars()
{
alert("1");
}

window.onload = function()
{
document.getElementById(“btnm”).onclick = function()
{
//Set the content of the div
var divElt = document.getElementById(“div1”);
//innerHtml and innerText are not codes, but attributes. The principle is the same as the value we set for text.
//innerHtml will treat the following string as html code and innerText as a string
divElt.innerHTML = “hahahahahahahahahaha“;
divElt.innerText = “hahahahahahahahahaha“;
}
document.getElementById(“password”).onkeydown = function(event,b)//local variable
{
//Get key value
//The key value of the Enter key is 13, and the ESC key value is 27
//For keyboard events, they all have the keyCode attribute to obtain the key value.
if(event.keyCode === 13)
{
//Recognize the Enter key and prompt that you are logging in
alert(“Login”)
}
}

document.getElementById(“myForm”).onsubmit = function()
{
alert(“Login”)
}

document.getElementById(“auto”).onclick = function()
{
var ui = [false,true,1,2,”abc”,3.14];
for(var i = 0; i < ui.length; i + + )
{
alert(ui[i]);
}
for(var i in ui)
{
//This var i is not an element of the array, but the subscript of the array
alert(i);//Display the index that is all subscripted
alert(ui[i]);
}
}
document.getElementById(“tyo”).onclick = function()
{
User = function(username,password)
{
this.username = username;
this.password = password;
}
var u = new User(“Zhang San”,”12345″);
alert(u[“username”] + “,” + u[“password”]);
//This is the index when used on an array. When used on an object, it is the attribute name of the object. It returns a string.
for(var value in u)
{
//The attribute name is a string
alert(value);
//It is a string itself, just put it in directly
alert(u[value]);
}
with(u)
{
//This method is only for understanding. Do not use it as much as possible. What you see is not what you get.
alert(username + “,” + password);
}
}
}

function vars()
{
alert(“1”);
}