Question

我正在做一项作业，以基于HTML和Javascript的方式列出应用程序。我目前正在尝试实现编辑功能，但无法弄清楚如何在子元素内调用div标签。编辑功能需要能够将标签中显示的内容复制到文本区域。

这是我的代码：

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <meta charset="utf-8">
    <title>Homework</title>
</head>
<body>
    <h1>Homework Tracker</h1>
    <br>
    <div class="AddNewSub"> <i class="material-icons" style="font-size:30px;  vertical-align: middle;">receipt</i>
        <textarea id="addhw" placeholder="Input Homework"></textarea>
        <button type="button" id="addbutton" onclick="add()"> Add </button>
    </div>
    <br>
    <div id="MainContents"> </div>
    <script>
        document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon')); 

        function add() {
            var contents = document.getElementById('addhw').value;
            contents = contents.replace(/\r?\n/g, '<br />');
            var newline = document.createElement('div');
            newline.setAttribute("class", "close");
            newline.setAttribute("id", "UserConDiv")
            newline.innerHTML = "<div id='contentdiv'>" + contents + "</div>" + " " + "<button type='button' id='delbutton' onclick='deletehw(this)'>Delete</button>" + "<button type='button' id='delbutton' onclick='edithw(this)'>Edit</button>" + "<br>";
            document.getElementById("MainContents").appendChild(newline);
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));


        }

        function deletehw(element) {

            let container = element.parentElement;
            container.parentNode.removeChild(container);
            localStorage.removeItem('UserInputCon');
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
        }

        function edithw(element) {
            var conDiv = document.getElementById('contentdiv').innerHTML;
            var i;
            for (i = 0; i < conDiv.length; i++) {
                document.getElementById('addhw').value = conDiv[i].innerHTML;
                var container = element.parentElement;
            container.parentNode.removeChild(container);
            localStorage.removeItem('UserInputCon');
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));

            }           
        }
    </script>
</body>

</html>

Answer 1

这是您edithw函数的功能，可以是：

function edithw(element) 
{         
    let text = element.parentElement.getElementsByTagName('div')[0].innerHTML
    document.getElementById('addhw').value = text;
}

edithw函数中缺少的是需要从生成的父div内的div获取innerHtml。

您不必担心会发生任何循环，因为您已经有了所需数据的父元素。

element.parentElement获取父div but you cannot call getElementById from a parentElement，而不是使用getElementsByTagName，然后获取您想要的任何子对象的innerHtml，在这种情况下，它是第一个元素。

您可以console.log()边走边看，以了解每次通话带来的好处，以便于理解：

    function edithw(element) 
    {         
        console.log('element',element);
        console.log('element.parentElement',element.parentElement);
        console.log('element.parentElement.getElementsByTagName',element.parentElement.getElementsByTagName('div'));

        let text = element.parentElement.getElementsByTagName('div')[0].innerHTML
        document.getElementById('addhw').value = text;

    }

这是完整的代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>Homework</title>
</head>

<body>
<h1>Homework Tracker</h1>
<br>
<div class="AddNewSub"> <i class="material-icons" style="font-size:30px;  vertical-align: middle;">receipt</i>
  <textarea id="addhw" placeholder="Input Homework"></textarea>
  <button type="button" id="addbutton" onclick="add()"> Add </button>
</div>
<br>
<div id="MainContents"> </div>
<script>

        document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon')); 

        function add() {

            var contents = document.getElementById('addhw').value;
            contents = contents.replace(/\r?\n/g, '<br />');

            var newline = document.createElement('div');
            newline.setAttribute("class", "close");
            newline.setAttribute("id", "UserConDiv")
            newline.innerHTML =  
                "<div id='contentdiv'>" + 
                contents + 
                "</div>" + 
                " " + 
                "<button type='button' id='delbutton' onclick='deletehw(this)'>Delete</button>" + 
                "<button type='button' id='editbutton' onclick='edithw(this)'>Edit</button>" + 
                "<br>";

            document.getElementById("MainContents").appendChild(newline);
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
        }

        function deletehw(element) {
            let container = element.parentElement;
            container.parentNode.removeChild(container);
            localStorage.removeItem('UserInputCon');
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
        }

        function edithw(element) 
        {         
            console.log('element',element);
            console.log('element.parentElement',element.parentElement);
            console.log('element.parentElement.getElementsByTagName',element.parentElement.getElementsByTagName('div'));
            
            let text = element.parentElement.getElementsByTagName('div')[0].innerHTML
            document.getElementById('addhw').value = text;

        }
    </script>
</body>
</html>

编辑待办事项清单功能

1 个答案: