极客教程HTML onchange
在HTML中，onchange 是一个事件属性，用于在用户改变表单元素的值时触发相应的事件。这个事件通常用于 <input>、<select> 和 <textarea> 元素上，当用户改变这些元素的值时，就会触发 onchange 事件。
示例代码
示例1：使用onchange事件监听input元素的值改变
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<input type="text" id="myInput" onchange="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "你输入的值是：" + x;
}
</script>
</body>
</html>
Output:
在这个示例中，当用户在输入框中输入内容并且移开焦点时，会触发 onchange 事件，调用 myFunction() 函数来显示用户输入的值。
示例2：使用onchange事件监听select元素的值改变
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<select id="mySelect" onchange="myFunction()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "你选择的是：" + x;
}
</script>
</body>
</html>
Output:
在这个示例中，当用户选择下拉框中的选项时，会触发 onchange 事件，调用 myFunction() 函数来显示用户选择的值。
示例3：使用onchange事件监听textarea元素的值改变
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<textarea id="myTextarea" onchange="myFunction()"></textarea>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = "你输入的内容是：" + x;
}
</script>
</body>
</html>
Output:
在这个示例中，当用户在文本域中输入内容并且移开焦点时，会触发 onchange 事件，调用 myFunction() 函数来显示用户输入的内容。
示例4：使用onchange事件实现动态计算
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<input type="number" id="num1" onchange="calculate()">
+
<input type="number" id="num2" onchange="calculate()">
=
<span id="result"></span>
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
document.getElementById("result").innerHTML = num1 + num2;
}
</script>
</body>
</html>
Output:
在这个示例中，当用户在两个输入框中输入数字并且移开焦点时，会触发 onchange 事件，调用 calculate() 函数来动态计算两个数字的和并显示在页面上。
示例5：使用onchange事件实现级联选择
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<select id="country" onchange="changeCity()">
<option value="china">中国</option>
<option value="usa">美国</option>
</select>
<select id="city"></select>
<script>
function changeCity() {
var country = document.getElementById("country").value;
var citySelect = document.getElementById("city");
citySelect.innerHTML = "";
if (country === "china") {
var cities = ["北京", "上海", "广州"];
} else if (country === "usa") {
var cities = ["纽约", "洛杉矶", "芝加哥"];
}
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.text = cities[i];
citySelect.add(option);
}
}
</script>
</body>
</html>
Output:
在这个示例中，当用户选择国家后，城市下拉框会根据选择的国家动态显示对应的城市选项。
示例6：使用onchange事件实现密码确认
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<input type="password" id="password" placeholder="请输入密码" onchange="checkPassword()">
<input type="password" id="confirmPassword" placeholder="确认密码" onchange="checkPassword()">
<p id="message"></p>
<script>
function checkPassword() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
var message = document.getElementById("message");
if (password === confirmPassword) {
message.innerHTML = "密码匹配";
} else {
message.innerHTML = "密码不匹配";
}
}
</script>
</body>
</html>
Output:
在这个示例中，当用户输入密码和确认密码后，会触发 onchange 事件，调用 checkPassword() 函数来检查两次输入的密码是否匹配。
示例7：使用onchange事件实现动态显示图片
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<select id="imageSelect" onchange="showImage()">
<option value="1">图片1</option>
<option value="2">图片2</option>
<option value="3">图片3</option>
</select>
<img id="image" src="" alt="图片">
<script>
function showImage() {
var imageSelect = document.getElementById("imageSelect");
var image = document.getElementById("image");
if (imageSelect.value === "1") {
image.src = "https://www.geek-docs.com/image1.jpg";
} else if (imageSelect.value === "2") {
image.src = "https://www.geek-docs.com/image2.jpg";
} else if (imageSelect.value === "3") {
image.src = "https://www.geek-docs.com/image3.jpg";
}
}
</script>
</body>
</html>
Output:
在这个示例中，当用户选择不同的选项时，会触发 onchange 事件，调用 showImage() 函数来动态显示对应的图片。
示例8：使用onchange事件实现动态改变样式
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
</style>
</head>
<body>
<select id="colorSelect" onchange="changeColor()">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<p id="text" class="red">这是一段文本</p>
<script>
function changeColor() {
var colorSelect = document.getElementById("colorSelect");
var text = document.getElementById("text");
text.classList.remove("red", "blue", "green");
if (colorSelect.value === "red") {
text.classList.add("red");
} else if (colorSelect.value === "blue") {
text.classList.add("blue");
} else if (colorSelect.value === "green") {
text.classList.add("green");
}
}
</script>
</body>
</html>
Output:
在这个示例中，当用户选择不同的颜色选项时，会触发 onchange 事件，调用 changeColor() 函数来动态改变文本的颜色样式。
示例9：使用onchange事件实现动态加载内容
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<select id="contentSelect" onchange="loadContent()">
<option value="1">内容1</option>
<option value="2">内容2</option>
<option value="3">内容3</option>
</select>
<div id="content"></div>
<script>
function loadContent() {
var contentSelect = document.getElementById("contentSelect");
var content = document.getElementById("content");
if (contentSelect.value === "1") {
content.innerHTML = "<p>这是内容1</p>";
} else if (contentSelect.value === "2") {
content.innerHTML = "<p>这是内容2</p>";
} else if (contentSelect.value === "3") {
content.innerHTML = "<p>这是内容3</p>";
}
}
</script>
</body>
</html>
Output:
在这个示例中，当用户选择不同的内容选项时，会触发 onchange 事件，调用 loadContent() 函数来动态加载对应的内容。
示例10：使用onchange事件实现动态显示隐藏元素
<!DOCTYPE html>
<html>
<head>
<title>onchange事件示例</title>
</head>
<body>
<input type="checkbox" id="showHide" onchange="toggleElement()"> 显示/隐藏元素
<div id="element" style="display: none;">这是要显示/隐藏的元素</div>
<script>
function toggleElement() {
var showHide = document.getElementById("showHide");
var element = document.getElementById("element");
if (showHide.checked) {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>
</body>
</html>
Output:
在这个示例中，当用户勾选复选框时，会触发 onchange 事件，调用 toggleElement() 函数来动态显示或隐藏指定的元素。