HTML onchange|极客教程

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:

HTML onchange

在这个示例中，当用户在输入框中输入内容并且移开焦点时，会触发 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:

HTML onchange

在这个示例中，当用户选择下拉框中的选项时，会触发 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:

HTML onchange

在这个示例中，当用户在文本域中输入内容并且移开焦点时，会触发 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:

HTML onchange

在这个示例中，当用户在两个输入框中输入数字并且移开焦点时，会触发 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:

HTML onchange

在这个示例中，当用户选择国家后，城市下拉框会根据选择的国家动态显示对应的城市选项。

示例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:

HTML onchange

在这个示例中，当用户输入密码和确认密码后，会触发 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:

HTML onchange

在这个示例中，当用户选择不同的选项时，会触发 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:

HTML onchange

在这个示例中，当用户选择不同的颜色选项时，会触发 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:

HTML onchange

在这个示例中，当用户选择不同的内容选项时，会触发 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>