时间戳

首页 > 解决方案 > 我想在使用 .Net 创建的待办事项表中添加一个字段卡，但我不知道我到底哪里出错了

javascript - 我想在使用 .Net 创建的待办事项表中添加一个字段卡，但我不知道我到底哪里出错了

问题描述

html

我的目标是通过使用此添加 html 元素按钮旋转 javascript 来添加 dom 元素。当您单击添加时，模式打开并且在填写必要的输入后，需要通过说添加将卡片添加到表格中，但是出现了问题，我无法弄清楚发生了什么。我想声明我已经调查了这个问题。 
<h5 class="card-title">Upcoming</h5>
    <h6 class="card-subtitle text-muted">Upcoming Task</h6>
    <!--Table title.-->
</div>
<!--Card body.-->
<div class="card-body p-3">

    <div id="tasks-upcoming">



        <!--Card Head.-->
        <div class="card mb-3 bg-light cursor-grab border drag-1" id="1">
            <div class="card-body p-3">
                <!--Check Box-->
                <div class="float-end mr-n2">
                    <label class="form-check">
                        <input type="checkbox" class="form-check-input" aria-label="completed" checked="">
                    </label>
                </div>
                <!--Check Box-->
                <!--Work title-->
                <p id="worktitle">Mobile Application</p>
                <!--Work title-->
                <!--Avatar-->
                <div class="float-end mt-n1">
                    <img id="userName" src="../images/DefaultUser-50.png" width="32" height="32" class="rounded-circle" alt="Avatar">
                </div>
                <!--Avatar-->
                <a id="workShow" class="ist-group-item active waves-effect btn-primary btn-sm" data-toggle="modal" data-target="#ModalLong">Show</a>
            </div>
        </div>
   </div>

JavaScript

在这里，我尝试通过调用元素 ID 来完成我提到的操作。 
//Add to-do card function.
 $(document).ready(function () {
        classnames();
        //call dragula
    
        dragula([
            document.getElementById('tasks-upcoming'),
            document.getElementById('tasks-progress'),
            document.getElementById('tasks-completed'),
            document.getElementById('skill')
        ]).on('drop', function (el) {
            //change classes depending on column.
            classnames();
        });
    
    
        //static adding of values
    
        $(".submit").click(function () {
            var getvalue1 = document.getElementById("taskName"), //task titile.
                getvalue2 = document.getElementById("informationText"), //task information.
    
                getvalue3 = document.getElementById("skill") //personal.
            
                getvalue4 = document.getElementById("textBody"), //to-do text modal.
    
                a = getvalue1.value,
                b = getvalue2.value,
                c = getvalue3.value,
                d = getvalue4.value;
    
            var today = new Date();
            $(".drag-1").append("<div class='card mb-3 bg-light cursor-grab border drag-1'><div class='card-body p-3'><input type='checkbox'arial-label='completed' checked='' class='checkbox' name='' value=''/><p id='workTitle1'><a id='workInfo'>" + a + "<p  id='worktitle'></p>" + b + "<img id='userName' width='32' height='32' class='rounded - circle' alt'=P-'>" + c + "<a id='workShow'>" + d + "<div id='textBody' class='modal-body'></a></div></div>');

标签： javascripthtmlasp.net-mvcdom

解决方案

此代码不完整，因此没有人能够复制您的问题并帮助您解决问题。类名（）；缺少函数，并且没有 class="submit" 的元素

除此之外，还有几个错误需要修复：

这条线...

$(".drag-1").append("<div class='card mb-3 bg-light cursor-grab border drag-1'><div class='card-body p-3'><input type='checkbox'arial-label='completed' checked='' class='checkbox' name='' value=''/><p id='workTitle1'><a id='workInfo'>" + a + "<p  id='worktitle'></p>" + b + "<img id='userName' width='32' height='32' class='rounded - circle' alt'=P-'>" + c + "<a id='workShow'>" + d + "<div id='textBody' class='modal-body'></a></div></div>');

应该以双引号而不是单引号结尾。

这一行：

getvalue3 = document.getElementById("skill") //personal.

缺少一个逗号。

它目前在最后缺少以下内容：

});});

我怀疑你只复制了这么多代码，为什么会丢失。我只是指出它以防万一它真的丢失了。

这些是需要解决的明显问题。如果这仍然有问题，您将需要提供更多代码。

推荐阅读