Javascript HTML/CSS/JS中未捕获的类型错误_Javascript_Css_Html_Forms

Javascript HTML/CSS/JS中未捕获的类型错误

javascript css html forms

Javascript HTML/CSS/JS中未捕获的类型错误,javascript,css,html,forms,Javascript,Css,Html,Forms,我正在尝试复制一个类似于的表单生成器我对HTML/CSS/JS相当陌生，所以我不确定我是否做对了。我只是想做这个的前端，所以现在存储正在创建的表单的数据不是问题。谢谢代码如下： <html> <head> <title>Form Builder</title> <link rel="stylesheet" type="text/css" href="Sign_in.css"> <!-- Bootstra

我正在尝试复制一个类似于的表单生成器

我对HTML/CSS/JS相当陌生，所以我不确定我是否做对了。我只是想做这个的前端，所以现在存储正在创建的表单的数据不是问题。谢谢代码如下：

 <html>
<head>
    <title>Form Builder</title>
    <link rel="stylesheet" type="text/css" href="Sign_in.css">
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/landing-page.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">


<style>
#div1 {width:50%; height:50%; padding:50px; border:1px solid #aaaaaa;}

</style>    
<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

</script>
</head>

<body>
    <form class="form-horizontal">
    <fieldset>

    <!-- Form Name -->
    <legend>Hello</legend>

<ul id="drag-elements">
    <li draggable="true" ondragstart="drag(event)">
    <!-- Text input-->
    <div class="form-group" >
        <label class="col-md-4 control-label" for="textinput">Text</label>  
        <div class="col-md-4" >
        <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
        </div>
    </div>
    </li>

    <li draggable="true"  ondragstart="drag(event)">
    <!-- Password input-->
    <div class="form-group" draggable="true" ondragstart="drag(event)">
      <label class="col-md-4 control-label" for="passwordinput">Password Input</label>
      <div class="col-md-4">
        <input id="passwordinput" name="passwordinput" type="password" placeholder="placeholder" class="form-control input-md">
        <span class="help-block">help</span>
      </div>
    </div>
    </li>
    </fieldset>
    </form>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>

</body>


表单生成器
#div1{宽度：50%；高度：50%；填充：50px；边框：1px实心#aaaaaa；}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
你好


正文


密码输入
帮助

您的

是可拖动的，但它们没有设置

id

，您正试图通过

拖动方法访问该id。只需为每个可拖动列表项设置一个id
，即可使其正常工作
您的
是可拖动的，但它们没有设置id
，您正试图通过拖动方法访问该id。只需为每个可拖动列表项设置一个id
，即可使其正常工作
HTML/CSS中未捕获的TypeError错误在哪里？@Michael错误在appendChild方法中。Uncaught TypeError：在“节点”上执行“AppDebug”失败：参数1不是“节点”类型。请考虑使用。您可能会发现，在您的脚本中，它比仅使用DOM更容易…@Mirabilis我已经阅读了jQuery，但是，如果我仅使用DOM实现此功能，我将如何着手修复此错误？@Mirabilis小心。。。“使用jQuery”是一个很好的答案。HTML/CSS中的UncaughtTypeError错误在哪里？@Michael它在appendChild方法中。Uncaught TypeError：在“节点”上执行“AppDebug”失败：参数1不是“节点”类型。请考虑使用。您可能会发现，在您的脚本中，它比仅使用DOM更容易…@Mirabilis我已经阅读了jQuery，但是，如果我仅使用DOM实现此功能，我将如何着手修复此错误？@Mirabilis小心。。。“使用jQuery”是一个很好的答案。@ktran15 Hm。。。尝试在放置第一个可拖动元素后动态生成另一个可拖动元素。但是，这是另一个问题现在，如果我的答案解决了你的问题，你可以点击复选标记。这向更广泛的社区表明，你已经找到了一个解决方案，给我和你自己都带来了一些声誉。没有义务这样做。快乐编码@KTRAN15HM。。。尝试在放置第一个可拖动元素后动态生成另一个可拖动元素。但是，这是另一个问题现在，如果我的答案解决了你的问题，你可以点击复选标记。这向更广泛的社区表明，你已经找到了一个解决方案，给我和你自己都带来了一些声誉。没有义务这样做。快乐编码！