Respond to Events
The <!--alert () function is not commonly used in JavaScript, but it is very handy for code testing.
The onclick event is just one of the many events you will learn in this tutorial. -
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<center>
<body>
<p>
JavaScript can respond to events. For example, click on the button:
</p>
<button type= "button" onclick= "alert (' welcome! ')" > Click here </button>
</body>
</center>
Change HTML content \
<!--you will often see document.getElementById ("some id"). This method is defined in the HTML DOM.
The DOM (Document Object model) is the official standard for accessing HTML elements.
-
<!--should be noted in this example
1.getElementById Don't write wrong
2.id can be different, according to their own needs to define their own, call the time to correspond
3. Encoding format to be aware, add Utf-8 in head
4.<button type= "button" onclick= "MyFunction ()" > Click here </button> this piece of code is not in the Script tab!!!
5. Combine event handling to modify your own code
-
<! DOCTYPE html>
<title>change HTML content</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<center>
<body>
<p id= "Demo" >
JavaScript can change the content of HTML elements.
</p>
<p id= "Angel" >
U o _ o u
</p>
<script>
function MyFunction ()
{
X=document.getelementbyid ("demo");//Find elements
X.innerhtml= "Hello javascript!"; /change Content
}
function myfunction_1 ()
{
Y=document.getelementbyid ("Angel");
Y.innerhtml= "Today is a fun day!";
}
</script>
<button type= "button" onclick= "MyFunction ()" > click here </button>
<button type= "button" onclick= "myfunction_1 ()" > click here </button>
</body>
</center>
Change HTML style \
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<center>
<p id= "Demo" >
Happy Birthday to!!!
</p>
<body>
<script>
function MyFunction ()
{
X=document.getelementbyid ("demo")//Find element
X.style.color= "#ff0000"; Change Style
}
</script>
<button typte= "button" onclick= "MyFunction ()" > Click Start </button>
</body>
</center>
Write HTML output
<!--can only use document.write in HTML output. If you use this method after the document is loaded, the entire document is overwritten. -
<! DOCTYPE html>
<center>
<title></title>
<body>
<script>
document.write ("document.write ("<p>this is a paragraph</p>");
</script>
</body>
</center>
javascript-react to events \ Change HTML content \ change HTML style \ Write HTML output
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
