在 JavaScript 中使用 class/id 编辑 innerHtml 不起作用答案

【问题标题】：Using class/id to edit innerHtml in JavaScript not working在 JavaScript 中使用 class/id 编辑 innerHtml 不起作用
【发布时间】：2019-12-28 19:10:30
【问题描述】：

您好，我尝试使用 Javascript 将 class 和 id 添加到我的 innerHtml 文本中，但是在完成之后，它没有显示应该在点击时显示的文本所以我想知道如何在不使用 class 或 id 的情况下编辑文本这是我下面的代码

<!DOCTYPE html>
<html lang="en">
    <body>
        <button id="myb">AAAAAAA</button>
        <table id="t01">
            <tr>
                <th></th>
                <th><p>Monday</p></th> 
                <th><p>Tuesday</p></th>
                <th><p>Wednesday</p></th>
                <th><p>Thursday</p></th>
                <th><p>Friday</p></th>
                <th><p>Saturday</p></th>
                <th><p>Sunday</p></th>
            </tr>
            <tr>
                <td class="black-mamba"><p>8:00AM</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
            </tr>
        </table>
        <script type="text/javascript">
           document.getElementById("myb").onclick = function() {
           document.getElementById("t01").innerHTML = "<table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table>";
                }
       </script>

    </body>
</html>

【问题讨论】：

一个代码 sn-p 会很有帮助。
请向我们提供一个简单的示例来说明您的问题
第13行的问题。
@ScottMarcus 尽管讽刺有时很有趣，但我们需要 OP 提供一些真正的澄清。我不确定讽刺会有所帮助。
@AndrewL64 是的，我猜是的，但我们不想惹恼 OP。

标签： javascript html onclick innerhtml

【解决方案1】：

我相信你错误地使用了onclick。

HTML：

<button id="myb" onclick="bCLick()">Some Text</button>
<table id="t01">
            <tr>
                <th></th>
                <th><p>Monday</p></th> 
                <th><p>Tuesday</p></th>
                <th><p>Wednesday</p></th>
                <th><p>Thursday</p></th>
                <th><p>Friday</p></th>
                <th><p>Saturday</p></th>
                <th><p>Sunday</p></th>
            </tr>
            <tr>
                <td class="black-mamba"><p>8:00AM</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
            </tr>
        </table>

JavaScript：

var button = document.getElementById("myb");
var table = document.getElementById("t01");

function bClick() { // Called when clicked
    table.innnerHTML = "<span><table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></span>";
}

虽然这可行，但我建议改用addEventListener，这是更好的做法：

HTML：

<button id="myb" onclick="bCLick()">Some Text</button>
<table id="t01">
            <tr>
                <th></th>
                <th><p>Monday</p></th> 
                <th><p>Tuesday</p></th>
                <th><p>Wednesday</p></th>
                <th><p>Thursday</p></th>
                <th><p>Friday</p></th>
                <th><p>Saturday</p></th>
                <th><p>Sunday</p></th>
            </tr>
            <tr>
                <td class="black-mamba"><p>8:00AM</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
            </tr>
        </table>

JavaScript：

var button = document.getElementById("myb");
var table = document.getElementById("t01");

button.addEventListener("click", () => { // Code inside is called when t01 is clicked
    table.innerHTML = "<span><table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></span>";
});

代码片段：

var button = document.getElementById("myb");
var table = document.getElementById("t01");

button.addEventListener("click", () => { // Code inside is called when t01 is clicked
    table.innerHTML = "<span><table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></span>";
 });

<button id="myb">Some Text</button> <!-- No onclick -->
<table id="t01">
            <tr>
                <th></th>
                <th><p>Monday</p></th> 
                <th><p>Tuesday</p></th>
                <th><p>Wednesday</p></th>
                <th><p>Thursday</p></th>
                <th><p>Friday</p></th>
                <th><p>Saturday</p></th>
                <th><p>Sunday</p></th>
            </tr>
            <tr>
                <td class="black-mamba"><p>8:00AM</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
                <td><p>50</p></td>
                <td><p>Smith</p></td>
            </tr>
        </table>

【讨论】：

让我将所有代码添加到 codepen 并发送链接，这样你会让我变得更好这是一个视频链接，指向我正在努力实现的目标drive.google.com/file/d/1NvSOXmpqieLZw9UOnX5CEMwXb_7DX9Hf/…
@pj-c0d3r 不需要 Codepen。只需编辑您的问题并将您的代码添加到代码 sn-p（编辑工具栏上的 <> 图标）。
@pj-c0d3r 我完全更新了我的答案以包含一个代码 sn-p 我建议您再次检查它。它应该可以解决您的问题。
请你们保持冷静，我不确定你们明白我在说什么...看看我在这里想要达到的目标codepen.io/pj-c0d3r/pen/ExavoJb 所以我想在之后显示另一张桌子单击按钮...我希望表格具有样式...我该怎么做
@pj-c0d3r 检查我的答案 m8！