个人中心
gpt4 book ai didi

javascript - 尝试用 JavaScript 创建
  • 元素，但它消失了

    • 转载 作者：行者123 更新时间：2023-11-30 16:29:42 25 4
    gpt4 key购买 nike

    我想用 JavaScript 制作一个 li 元素。有人告诉我这会奏效，但事实并非如此。当我单击提交按钮时，我在文本字段中写的内容出现，然后很快消失。我该怎么办？

    function addLi () {
        var x = document.createElement("LI");
        var t = document.createTextNode(document.getElementById('text').value);
        x.appendChild(t);
        document.getElementById("elements").appendChild(x);
    }
        <header>
            <title>ToDoList</title>
            <script src="todolist.js"></script>
        <header>
        <body>
            <div>
                <form onSubmit="addLi();">
                    <input type="text" value="Type here!" id="text">
                    <input type="submit" value="Submit">
                </form>
                <ol id="elements">
                </ol>
            </div>
        </body>

    最佳答案

    @Felix 说的是真的。您的 submit 按钮正在提交 form，这会打开一个重新加载页面的请求。这是默认行为。您必须取消(又名防止)此行为才能使您的功能正常工作:

    1. 您可以将 return 语句添加到 form 元素中的 onSubmit 事件:

      <form onSubmit="return addLi();">

      然后 return false; 在函数的末尾。

      Fiddle

    2. 您可以将当前的事件 传递给处理程序并且prevent它按预期工作:

      <form onSubmit="addLi(event);">

      然后在函数末尾添加 event.preventDefault();。

      Fiddle

    3. 您还可以去掉 submit 并使用 button，默认情况下它不会提交 form: 

      <input type="button" value="Submit" onclick="addLi()" />

      Fiddle

    关于javascript - 尝试用 JavaScript 创建 <li> 元素，但它消失了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33526641/

    25 4 0
    文章推荐： javascript - JavaScript 中 "==="运算符的名称是什么
    文章推荐： c# - 如果表单没有焦点，则不会调用 OnPaint
    文章推荐： c# - 任何库将数字拼音转换为带声调标记的拼音？
    文章推荐： c++ - dlopen - undefined symbol 错误
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com