Click on this text!
<html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
То же самое с помощью функции:
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
Можно использовать обработчик события в виде кнопки:
Кликни по кнопке, чтобы увидеть дату.
<p>Кликни по кнопке, чтобы увидеть дату.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo1").innerHTML = Date();
}
</script>
<p id="demo1"></p>
Тоже самое можно записать так:
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
Изменения при наведении мышкой
Mouse Over Me
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:240px;height:40px;padding:40px;color:white;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
Можно сделать изменения при клике:
Click Me
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38; width:280px;height:100px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
