Question

我试图取代'点击我！'使用我的javascript在p标签中显示文本值。单击div元素时应运行该脚本。为什么不起作用？

    <!DOCTYPE html>
    <html>
            <head>
    <link rel='stylesheet' type='text/css' href='Index.css'>
            </head>
            <body>
                    <h1 id="englishHeader">English Quotes</h1>
                    <div id="inputBox" onclick = onclick()>
            <p>Click Me!</p
        </div>
            </body>

    <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
    <script src="index.js"></script>
    </html>
<script>

    function onclick(){
    //var quotes += quotes[i]
            var itemTwo = document.getElementById('inputBox');
            var txt = itemTwo.firstChild.nodeValue;
            txt = txt.replace('Click Me!', 'Hello there');
            itemTwo.firstChild.nodeValue = txt;
        }
</script>

Answer 1

尝试使用itemtwo.childNodes [0] .outerText来获取和设置

标记而不使用I'属性。但我使用id的事情是最好的主意。

Answer 2

div的第一个子节点是 TextNode ，其中包含空格和新行，它们出现在div的开头和p的开头之间。

没有文字点击我！有替换。

您需要选择段落的第一个孩子，而不是div。

Answer 3

正如其他人已经提到的那样，你的HTML构造很差，并且命名你的函数“onclick”是一个非常糟糕的主意。

对于这样一个简单的操作，你还编写了比它需要的更复杂的JavaScript。

下面：

<!DOCTYPE html>
<html>
<head>
    <title>Some Title</title>
</head>

<body>
  <h1 id="englishHeader">English Quotes</h1>

  <div id="inputBox">
    <p id="changeMe">Click Me!</p>
  </div>

  <script>
    let div = document.getElementById('inputBox');

    div.addEventListener('click', () => {
        let p = document.getElementById('changeMe');
        p.textContent = 'Hello there';
    });
  </script>
</body>
</html>

当然可以采取其他方法，但这是一种（相对简单的）方法。

Answer 4

以下是更正后的代码：

<!DOCTYPE html>
<html>
        <head>
             <link rel='stylesheet' type='text/css' href='Index.css'>
        </head>
        <body>
           <h1 id="englishHeader">English Quotes</h1>
          <div id="inputBox" onclick="onpclick()"><p>Click Me!</p>
          </div>
         </body>

<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script src="index.js"></script>
<script>
function onpclick()
{
  var itemTwo = document.getElementById('inputBox');
  var txt = itemTwo.firstChild.innerHTML;
  txt = txt.replace('Click Me!', 'Hello there');
  itemTwo.firstChild.innerHTML = txt;
}
</script>
</html>

使用innerHTML而不是nodevalue。
函数名称不应该是onlclick ..我已将其更改为onpclick。
p标签未正确结束。
p应该在同一行上作为div的第一个子项。其他新行或空格将被视为第一个孩子。

我的javascript没有在我的html中更新我的节点值

4 个答案: