1.onclick事件 <button type="button" onclick="alert('Welcome!')">點擊這裡</button> <div onclick="alert('Welcome!')">點擊這個div</div> 2.改變 HTML 內容 添加按鈕，並調用onclic ...
1.onclick事件
<button type="button" onclick="alert('Welcome!')">點擊這裡</button>
<div onclick="alert('Welcome!')">點擊這個div</div>
2.改變 HTML 內容
添加按鈕，並調用onclick事件
<p id="demo">
JavaScript 能改變 HTML 元素的內容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改變內容
}
</script>
<button type="button" onclick="myFunction()">點擊這裡</button>//設置事件觸發按鈕
3.圖片替換
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("圖片1鏈接"))
{
element.src="圖片2鏈接";
}
else
{
element.src="圖片1鏈接";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="圖片1鏈接">
4.改變標簽的css
<body>
<p id="demo" style="color: black;">JavaScript 能改變 HTML 元素的樣式。</p> <!--需要改變樣式的標簽-->
<script>//設置改變方法
function myf()
{
x=document.getElementById("demo");
if(x.style.color.match('black'))
{
x.style.color="red";
}
else if(x.style.color.match('red'))
{
x.style.color="blue";
}
else
{
x.style.color="black";
}
}
</script>
<input type="button" onclick="myf()" value="點擊這裡" /> <!--點擊方法-->
</body>
5.判斷輸入是否是數字
<body>
<input id="demo" type="text" />
<script>//設置改變方法
function myf()
{
x=document.getElementById("demo").value;
if(x==""||isNaN(x)) //isNaN()代表非數字
{
alert("輸入錯誤");
}
}
</script>
<input type="button" onclick="myf()" value="點擊這裡" /> <!--點擊方法-->
</body>
<——第一節完——>
