"The HTML DOM is a standard object model and programming interface for HTML. It defines:
Further intro: click here.
Before
After we click the Lucky Draw button
The way I coded it:
<!DOCTYPE html>
<html>
<head>
<title>JS - HTML DOM</title>
<script type="text/javascript">
function LuckyDraw() {
var spanObj=window.document.getElementById("reward");
/*
This syntax changes the content of an HTML element when it’s needed.
"window" can be omitted.
We name an id, reward, to revise the body easily.
spanObj is a tag Object. It is related with <span id="reward">pineapple cheese</span>.
*/
spanObj.innerHTML="lemon"; //innerHTML is a property for us to easily modify the content of an HTML element.
spanObj.style.color="green";
spanObj.style.fontFamily="Arial"; //When CSS transfers to JS, the second word should be written in capital letter.
spanObj.style.fontWeight="bold";
spanObj.style.display=none;
}
</script>
</head>
<body style="font-family:Arial">
<div>
Congratulations! You won a piece of <span id="reward">pineapple cheese</span> cake!
</div>
<button onclick="LuckyDraw();">Lucky Draw</button>
</body>
</html>
Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.
将专案部署到Vercel 挑战开跑这两天,遇到最困扰的就是无法顺利将专案部署到GitHub Page...
为了解释时间跟空间的取舍,来一条leetcode的题目,就是最经典的第一题Two Sum 输入一组a...
DocsPage DocsPage 是由 Storybook Docs 所提供的页面,无需任何的设定...
前言 昨日稍微介绍了为什麽要取得这些资料,今天来实作取得资料,并且写入Table LegalDail...
前言 在更新Linkedkin 个人档案的时候 偶然发现他有技术检定测验 如果总成绩在前30%,会发...