Home > Developer > JavaScript
Mission Purpose
Task description
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ife JavaScript Task 01</title>
<body>
<label> Please enter Beijing Air quality today: <input id= "Aqi-input" type= "text" ></label>
<button id= "button" > Confirm Fill </button>
<div> The value you entered is: <span id= "Aqi-display" > Not yet entered </span></div>
<script type= "Text/javascript" >
(function() {
/*
Write down the code below the comment
bind a click event to button buttons
In the event handler function
gets The value of the aqi-input input and displays it in aqi-display
*/
})();
</script>
</body>
Task considerations
Online learning Resources
1. onclick Events
The OnClick event occurs when a user taps an object.
Grammar:
In HTML:
< element onclick= "myFunction ()" >
In JavaScript
2. Input Text Value Property
The Value property sets or returns the values in the text input box, which includes default values, user input values, or values set in script.
Grammar:
Returns the Value property:textobject. Value
Set the Value property:textobject. Value = text
Property value: Text: Represents the value of the text field.
Return value: A string that represents the value of the text field.
3. DOM InnerHTML Properties
The innerHTML property is used to get and modify all tags and content within a specified element, which is a string that contains both the contents of the element (as well as the child elements), and the element content is displayed in the original HTML code, such as "<p>some text</p>"
Grammar:
Returns the InnerHTML property:htmlelementobject. InnerHTML
Set InnerHTML property:htmlelementobject. InnerHTML = text
Property value: Text: Represents the HTML content of an element.
Return value: A string that represents the HTML text.
4. Node.innertext
The content that represents the node content and its descendants, unlike innerHTML, does not contain HTML tags.
5. DOM textcontent Properties
The Textcontent property is used to set or return the textual content of a node and its internal nodes. Setting the Textcontent property on a node deletes all its child nodes and replaces it with a text node with the given value.
Grammar:
Returns the text content of thenode: node. textcontent
Set the text content of thenode: node. textcontent = text
Property Value: text : String Type: Represents the text content of the specified node.
Return value: A string that represents the node and child node text.
6. textcontent difference from innertext
(1) Textcontent will get content for all elements, including <script> and <style> elements. InnerText not.
(2) InnerText does not acquire the content of the hidden element, and Textcontent will.
(3) InnerText will trigger Reflow, and textcontent will not.
(4) InnerText return value will be formatted, and textcontent will not.
7. textcontent difference from innerHTML
InnerHTML returns HTML text, which is better when you modify the text in an element, using Textcontent.
8. Job submitted
Code Address: https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1
Demo Address: http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1/index.html
0 Basic JavaScript encoding (i)
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
