Register
> 博客>

html里面写js代码

新速特源码 3月17日 16 0

在HTML中编写JavaScript代码非常常见，你可以使用<script>标签将JavaScript代码嵌入到HTML文档中。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript in HTML Example</title>
</head>
<body>
    <h1>JavaScript in HTML Example</h1>

    <p id="demo">This is a demonstration of JavaScript in HTML.</p>

    <button onclick="changeText()">Click me</button>

    <script>
        function changeText() {
            document.getElementById("demo").innerHTML = "Text changed using JavaScript!";
        }
    </script>
</body>
</html>

在这个例子中，JavaScript代码被包含在<script>标签中。changeText()函数用于在点击按钮时改变段落元素的内容。按钮上的onclick属性指定了当按钮被点击时要调用的JavaScript函数。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Form Example</title>
</head>
<body>
    <h1>JavaScript Form Example</h1>

    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <input type="submit" value="Submit">
    </form>

    <p id="result"></p>

    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            event.preventDefault(); // Prevent form submission
            
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            
            var result = "Name: " + name + "<br>Email: " + email;
            
            document.getElementById("result").innerHTML = result;
        });
    </script>
</body>
</html>

在这个例子中，当表单被提交时，submit事件被触发，然后JavaScript代码捕获了这个事件并阻止了默认的表单提交行为。然后，它从输入框中获取值，并将这些值显示在页面上。

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报