Question

此代码用于将项目项目显示为按钮上方div中的列表，但是，虽然按钮和提示工作，但div中没有显示文本。救命啊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Shopping List</title>
        <style>
            #button {
                width:80px;
                height:30px;
            }
            div.ex {
                width:500;
                height:500;
            }
        </style>
        <script>
            function a() {
                var thing = prompt('Insert an item or press cancel');

                if (thing != null && thing != undefined) {
                    document.getElementById('b') += thing;
                }
                else {
                }
            }
        </script>
    </head>
    <body>
        <div class='ex' style="color:#007AFC"></div>
        <button onclick='a()' id='button'>Add Item</button>
    </body>
</html>

Answer 1

html：

<div class='ex' style="color:#007AFC" id="b"></div>

JS：

document.getElementById('b').innerHTML+=thing;

Answer 2

我有fiddle表明它有效。相关的javascript如下：

document.getElementById('addButton').addEventListener("click", addListItem, false);

function addListItem(){
    var thing=prompt('Insert an item or press cancel') + "<br />";
    if(thing!=null&&thing!=undefined){
        document.getElementById('listDiv').innerHTML += thing;
    }
}

旁注：尽量远离内联样式和脚本。这使得维护起来更加困难。

Answer 3

首先，您使用的是document.getElementById('b')，但是您没有id="b"的HTML元素。其次，您不能仅使用+=运算符更改元素的HTML内容。您需要修改innerHTML属性，如下所示：

 document.getElementById('b').innerHTML += thing;

此外，您需要拥有id="b"的HTML元素，如下所示：

 <div id="b" class='ex' style="color:#007AFC"></div>

但是，请考虑为id使用更具描述性的名称。

Answer 4

你真的可以用“+ =”添加文字！？我会尝试使用append()

sushain97说的是：为元素添加一个id（id =“b”）。但是如果你想一个接一个地添加更多项目，你需要使用append（），而不是innerHTML（），因为innerHTML（）将替换所有内容。

Div文字没有显示

4 个答案: