Fatal编程技术网

Javascript Div文本不显示

javascript css html text

Javascript Div文本不显示,javascript,css,html,text,Javascript,Css,Html,Text,此代码旨在将项目作为列表显示在按钮上方的div中，但是，尽管按钮和提示有效，但div中没有显示任何文本。帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Shopping List</title> <style> #button {

此代码旨在将项目作为列表显示在按钮上方的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>


购物清单
#钮扣{
宽度：80px；
高度：30px；
}
除名{
宽度：500；
身高：500；
}
函数a（）{
var thing=prompt（'插入项目或按取消'）；
if（thing！=null&&thing！=未定义）{
document.getElementById（'b'）+=thing；
}
否则{
}
}
添加项
首先，您使用的是
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>代码> ./p> ，你真的可以用“+=”来添加文本吗？我会尝试使用

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

html:

<div class='ex' style="color:#007AFC" id="b"></div>
我有一张照片显示它在工作。相关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;
    }
}

document.getElementById（'addButton'）.addEventListener（“单击”，addListItem，false）；
函数addListItem（）{
var thing=prompt（'插入项目或按取消'）+“
”；
if（thing！=null&&thing！=未定义）{
document.getElementById（'listDiv'）.innerHTML+=thing；
}
}
旁注：尽量远离内联样式和脚本。这使得维护变得更加困难。

你的div中没有文本，你是否希望当你在promt中给出一些文本时，它会在div文本中出现…？并且没有背景颜色。。。所以决定：内容和/或背景颜色。如果您想要内容，请确保该功能正常工作。这是您的答案吗？此处不使用jquery（append（））请不要介绍jquery，除非（1）使用它会更容易回答或者（2）提问者已经在使用它。为这种基本的东西添加一个库是没有意义的。你是一个非常乐于助人的人。非常感谢。我应该记得我的.innerHTML后缀：）没问题。香草JS有时可能有点冗长。 
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;
    }
}