getelementbyid 相关问题

getElementbyId() 无法从我的表中正确获取 td 元素

我的 html 中有一个代表棋盘的表格，代码如下： {% 范围内的行(8) %} &l... 我的 html 中有一个代表棋盘的表格，代码如下： <table id="chess-board" class="board"> {% for row in range(8) %} <tr> {% for col in range(8) %} <td id="{{ 'ABCDEFGH'[col] }}{{ 1+row }}" onclick="handleClick('{{ 'ABCDEFGH'[col] }}{{ 1+row }}')">{{ 'ABCDEFGH'[col] }}{{ 1+row }}</td> {% endfor %} </tr> {% endfor %} </table> 我想访问表的字段，并用 js 中每个函数的片段填充它： function renderBoard(gameState) { const chessBoard = document.getElementById("chess-board"); chessBoard.innerHTML = ''; // Clear the board before re-rendering // Loop through the rows of the board (gameState.board is an 8x8 array) Object.entries(gameState.board).forEach(([key, pieceData]) => { const [rowIndex, colIndex] = key.split(',').map(Number); const squareId = `${'ABCDEFGH'[colIndex]}${1 + rowIndex}`; // Calculate the cell ID (e.g., A1, B2, ...) const cellElement = document.getElementById(squareId); // Get the corresponding <td> element console.log(cellElement) if (cellElement) { // If there is a piece in this square, add it if (pieceData && pieceData.type !== null) { const pieceImage = document.createElement("img"); // Set the piece image based on the type and color const pieceType = pieceData.type; pieceImage.src = `static/pieces/${pieceType}.png`; pieceImage.alt = `${pieceData.color} ${pieceType}`; pieceImage.classList.add("piece"); // Optional: add CSS class to style the pieces // Clear any existing piece (in case the square was previously occupied) cellElement.innerHTML = ''; // Clear previous content // Append the new piece image to the <td> element cellElement.appendChild(pieceImage); } else { // If there is no piece, make sure the <td> is empty cellElement.innerHTML = ''; } } else { console.log(`Error: Could not find element with ID: ${squareId}`); } }); } squareId 计算正确，但随后 cellElement 变为 null，我不明白为什么 我尝试通过手动放置每个 tr 和 td 以及所有 Id 来实现没有循环的 html 棋盘，以便它们 100% 正确，但仍然不起作用 我尝试使用 #A1 等访问 css 中 tds 的 id。这很有效，所以我知道 id 是正确给出的。 我尝试在 DOMContentLoades 之后以及 window.onload 之后调用函数，但都没有解决问题。 谢谢您的帮助！ 不知道 gameState 板应该是什么样子，但我看到你正在调用 split on key 而不是pieceData。 无论如何，在 FireFox 等浏览器中使用单独的 js 文件设置断点并查看与控制台日志相比在哪里获取 null 可能更容易。

通过类和 ID 获取元素内的元素 - JavaScript

好吧，我以前涉足过 JavaScript，但我写过的最有用的东西是 CSS 样式切换器。所以我对此有点陌生。假设我有这样的 HTML 代码： 好吧，我以前涉足过 JavaScript，但我写过的最有用的东西是 CSS 样式切换器。所以我对此有点陌生。假设我有这样的 HTML 代码： <div id="foo"> <div class="bar"> Hello world! </div> </div> 如何将 Hello world! 更改为 Goodbye world!？ 我知道 document.getElementsByClassName 和 document.getElementById 是如何工作的，但我想了解得更具体。抱歉，如果之前有人问过这个问题。 嗯，首先你需要使用像getElementById这样的函数来选择元素。 var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0]; getElementById仅返回一个节点，而getElementsByClassName返回节点列表。 由于只有一个具有该类名称的元素（据我所知），因此您可以只获取第一个元素（这就是 [0] 的用途，它就像一个数组）。 然后，您可以使用 .textContent 更改 html。 targetDiv.textContent = "Goodbye world!"; var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0]; targetDiv.textContent = "Goodbye world!"; <div id="foo"> <div class="bar"> Hello world! </div> </div> 你可以这样做： var list = document.getElementById("foo").getElementsByClassName("bar"); if (list && list.length > 0) { list[0].innerHTML = "Goodbye world!"; } 或者，如果您想以更少的错误检查和更简洁的方式完成此操作，可以像这样在一行中完成： document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!"; 解释： 您可以通过 id="foo" 获得元素。 然后您会找到该对象中包含的具有 class="bar" 的对象。 返回一个类似数组的nodeList，因此您引用该nodeList中的第一项 然后您可以设置该项目的 innerHTML 来更改其内容。 注意事项：某些较旧的浏览器不支持 getElementsByClassName（例如旧版本的 IE）。 如果缺少该功能，可以将其调整到位。 在这里，我建议使用具有内置 CSS3 选择器支持的库，而不是自己担心浏览器兼容性（让其他人完成所有工作）。 如果您只想要一个库来做到这一点，那么 Sizzle 会很好用。 在 Sizzle 中，可以这样完成： Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!"; jQuery 内置了 Sizzle 库，在 jQuery 中，这将是： $("#foo .bar").html("Goodbye world!"); 我们还可以通过 querySelector 使用 CSS 选择器 var targetDiv = document.querySelector('#foo .bar'); targetDiv.textContent = "Goodbye world!"; 如果这需要在 IE 7 或更低版本中工作，您需要记住 getElementsByClassName 并不存在于所有浏览器中。 因此，您可以创建自己的 getElementsByClassName 或者您可以尝试这个。 var fooDiv = document.getElementById("foo"); for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) { childNode = fooDiv.childNodes[i]; if (/bar/.test(childNode.className)) { childNode.innerHTML = "Goodbye world!"; } } 最简单的方法是： function findChild(idOfElement, idOfChild){ let element = document.getElementById(idOfElement); return element.querySelector('[id=' + idOfChild + ']'); } 或更好的可读性： findChild = (idOfElement, idOfChild) => { let element = document.getElementById(idOfElement); return element.querySelector(`[id=${idOfChild}]`); } 您也可以在 DOM 元素上使用 getElementById 或 getElementsByClassName。不仅仅是document var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0]; targetDiv.textContent = "Goodbye world!"; <div id="foo"> <div class="bar"> Hello world! </div> </div> 递归函数： function getElementInsideElement(baseElement, wantedElementID) { var elementToReturn; for (var i = 0; i < baseElement.childNodes.length; i++) { elementToReturn = baseElement.childNodes[i]; if (elementToReturn.id == wantedElementID) { return elementToReturn; } else { return getElementInsideElement(elementToReturn, wantedElementID); } } } 我的意思是这有效： document.write("Goodbye world"); <div id="foo"> <div class="bar"> Hello world! </div> </div> 您不应该使用document.getElementByID，因为它仅适用于客户端控制哪些 id 是固定的。您应该使用 jquery，如下例所示。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="foo"> <div class="bar"> Hello world! </div> </div> 用这个： $("[id^='foo']").find("[class^='bar']") // do not forget to add script tags as above 如果您想要任何删除编辑任何操作，只需添加“。”后面进行操作

“innerHTML”不起作用

我的页面中目前有这一行： 我的页面中目前有这一行： <p id="replaced"> <a id="linkReplace" href="https://www.g2a.com/r/nowyoushare"> <img src="images/ads.png" class="img-responsive" alt="" onmouseover="hover(this);" onmouseout="unhover(this);"> </a> </p> 因此 adblock 检测并阻止我的链接和图片： 图片 因此使用 JavaScript 创建了一个测试脚本，但它不起作用：/ 代码： <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/lightbox.min.js"></script> <script type="text/javascript" src="js/wow.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script> if(document.getElementById('replaced').length == 0) { document.getElementById('replaced').innerHTML = 'chocolat'; } </script> 有人可以帮助我吗？谢谢 但是我希望如果“替换”为空，那么添加一些内容到 如果您想检查内容是否为空，请使用 .innerHTML.length : if(document.getElementById('replaced').innerHTML.length == 0) { document.getElementById('replaced').innerHTML = 'chocolat'; } 希望这有帮助。 内容为空的情况： if(document.getElementById('replaced').innerHTML.length == 0) { document.getElementById('replaced').innerHTML = 'chocolat'; } <p id="replaced"></p> 我无法理解你想要实现什么......你能更好地解释一下吗？ 顺便说一句.. if(document.getElementById('replaced').length == 0) { document.getElementById('replaced').innerHTML = 'chocolat'; } 基本上你是在说“如果替换的元素不存在，则替换其中的内容”。它怎么可能起作用？ @bezoo回复后编辑 您可以编写类似的内容来在检查元素是否存在后创建该元素。 if(document.getElementById('replaced').length == 0) { var p = document.createElement('p'); p.setAttribute("id", "replaced"); } 然后对刚刚创建的元素的innerhtml 执行任何您想要的操作。 编辑2 我理解错了.. 这段代码应该可以工作 if(document.getElementById('replaced').innerHTML == "") { document.getElementById('replaced').innerHTML = 'chocolat'; } getElementById 返回 HTML 元素节点。它没有 length 属性，因此该属性永远不会等于 0。 如果您尝试测试该元素是否存在，请检查返回值是否为真值： if (document.getElementById('replaced'))

Javascript：不更改 div insideHTML

我真的不明白为什么这不起作用。我尝试了一些技巧，但我就是不明白。 警报（'嘿'）； var vText = </desc> <question vote="4"> <p>我真的不明白为什么这不起作用。我尝试了一些技巧，但我就是不明白。</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type=&#34;text/javascript&#34;&gt; alert(&#39;Hey&#39;); var vText = document.getElementById(&#34;results&#34;); vText.innerHTML = &#39;Changed&#39;; alert(vText.innerHTML); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;results&#34;&gt; hey there &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </question> <answer tick="true" vote="12"> <p>正如您在此处看到的那样，这正在起作用：</p> <p><a href="http://jsfiddle.net/gHbss/">http://jsfiddle.net/gHbss/</a></p> <p>将 JavaScript 放在 HTML div 容器之后非常重要。</p> </answer> <answer tick="false" vote="4"> <p>您面临的问题是浏览器运行渲染/处理页面时遇到的 JavaScript。此时，它将 <pre><code>alert()</code></pre> 您的消息，但相关元素 <pre><code>#results</code></pre> <pre><code>div</code></pre> 不存在于 DOM 中，因此无法更改任何内容。</p> <p>要解决此问题，您可以将 <pre><code>script</code></pre> 放置在页面末尾、关闭 <pre><code>&lt;/body&gt;</code></pre> 标记之前，或者在 <pre><code>onload</code></pre> 或 <pre><code>body</code></pre> 的 <pre><code>window</code></pre> 事件中运行代码。</p> </answer> <answer tick="false" vote="1"> <p>脚本必须放在 div#results 之后或在 onload 上执行，否则当您尝试访问该元素时仍然未知。</p> </answer> <answer tick="false" vote="1"> <p>需要在onload事件中调用此脚本 即</p> <pre><code> window.onload=function(){ //your code } </code></pre> </answer> <answer tick="false" vote="1"> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type=&#34;text/javascript&#34;&gt; function onloadCall() { alert(&#39;Hey&#39;); var vText = document.getElementById(&#34;results&#34;); vText.innerHTML = &#39;Changed&#39;; alert(vText.innerHTML); } &lt;/script&gt; &lt;/head&gt; &lt;body onload=&#34;onloadCall()&#34;&gt; &lt;div id=&#34;results&#34;&gt; hey there &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>希望上面的代码片段能告诉你解决方法</p> </answer> </body></html>

为什么javsascript会认为全局变量未定义

我正在编写一个函数来检查页面上的表格是否为空，并根据需要插入带或不带标题的行。 页面本身的代码是：

如何使用getElementById动态添加脚本src？

对我宽容一些——我不会在 javascript 上花费很多时间。 ：D 我正在尝试编写一个脚本，该脚本将基于 URL 查询构建 JS 调用，但无法更新脚本 src。 例如，如果

为什么在我点击打开聊天之前聊天窗口就打开了？

所以，一开始我没有任何问题。 看起来效果很好。 我加载脚本，它只提供了“打开聊天”选项。 现在，它加载已经打开的整个聊天窗口，但不加载内容......

getElementById 在 VBA 中不起作用，错误 438

我对 VBA 比较陌生（我知道基础知识，但其他不多），我正在尝试设置一些代码来为我填写在线表格，但是当我运行代码时，我收到 438 错误: 物体

为什么使用 document.getElementById 时祝贺消息不显示在 div 中

我编写了以下代码，需要更改 window.alert 消息，以便它们显示在 div 框中。然而，我已经从最初的祝贺消息开始，但它没有出现......

使用 JavaScript 通过自定义属性获取元素

我有一个 XHTML 页面，其中每个 HTML 元素都有一个唯一的自定义属性，如下所示： 我需要一种方法来通过 ID 找到这个元素，

javascript：获取textarea的内容，textContent与innerHTML与innerText

我在使用 js 获取文本区域的内容时遇到问题。 我觉得我以前已经这样做过很多次了，没有任何问题，但有些东西把它扔掉了，或者我有精神障碍。 html <

抓取html数据Vba

我想制作一个从网站的一部分提取数据的函数。 以下是 HTML 站点。 HTML 代码。 函数代码 函数 GetElementById(url 作为字符串，id 作为字符串，可选

值抓取错误 C# [已关闭]

我是 C# 编码新手，正在编写一个小程序来从 Mt.Gox 获取当前的比特币价值。 这是我当前使用的代码： 命名空间 BitcoinValueScraper { 公开部分...

Mat-table获取列宽

如何在打字稿中获取列标题宽度（角度垫表）？我尝试使用 id 并获取 elementById.clientWidth 但它不适用于 mat 表列。 我需要获取每列的大小...

jest jsdom - dom.window.document.getElementById(X) 成功，但 document.getElementById(X) 失败

这个问题真是令人头疼，Google 和 ChatGPT 都无法解决。 这是一个使用 jsdom 的简单直接的玩笑测试，我在博客和 Github 上见过几十个类似的测试。 1000ms...

javascript 程序停止执行

我有一个包类，在开始时给出一个随机ID，然后可以选择包类型。 看起来，这些值给出是正确的。我可以在包裹和信件之间单击...

document.getElementById 用于 jQuery 中的变量元素

我似乎遇到了一个可能是新问题的问题（我在任何地方都找不到解决方案） 我有一个 jQuery 插件，它在对象中获取 4 个变量，其中 Geocoords 作为值（50.3675658° 或 -23.73456°）...

输入类型=“radio”的 getElementById

我正在尝试将值设置为单选按钮。但这不起作用。 这是示例代码： 显示单选按钮... 我正在尝试将值设置为单选按钮。但它不起作用。 这是示例代码： <!DOCTYPE html> <html> <body> <h1>Display Radio Buttons</h1> <form action="/action_page.php"> <p>Please select your age:</p> <input type="radio" id="age" name="age" value="30"> <input type="radio" id="age" name="age" value="60"> <input type="radio" id="age" name="age" value="100"> <input type="button" value="Set 30" onclick="document.getElementById('age').value='30';"> <input type="button" value="Set 60" onclick="document.getElementById('age').value='60';"> <input type="button" value="Set 100" onclick="document.getElementById('age').value='100';"> <p>Please input your Text:</p> <input type="text" value="" id="text" name="text" size="100" > <input type="button" value="Set Text" onclick="document.getElementById('text').value='Some Text';"> <input type="button" value="Set other text" onclick="document.getElementById('text').value='Some Other Text';"> </form> </body> </html> 设置文本效果完美。 但设置年龄不起作用。我的错在哪里？ 非常感谢！ 我希望看到单选按钮的正确值 要检查单选按钮，请设置其 checked 属性。您没有分配值来检查具有该值的按钮。 相反，您可以使用查询选择器来查找具有所需值的按钮，并设置其属性。 ID 应该是唯一的。我删除了无用的重复 id="age" 属性。 function check_radio(name, value) { let radio = document.querySelector(`input[name='${name}'][value='${value}']`); if (radio) { radio.checked = true; } } <!DOCTYPE html> <html> <body> <h1>Display Radio Buttons</h1> <form action="/action_page.php"> <p>Please select your age:</p> <input type="radio" name="age" value="30"> <input type="radio" name="age" value="60"> <input type="radio" name="age" value="100"> <input type="button" value="Set 30" onclick="check_radio('age', 30)"> <input type="button" value="Set 60" onclick="check_radio('age', 60)"> <input type="button" value="Set 100" onclick="check_radio('age', 100)"> <p>Please input your Text:</p> <input type="text" value="" id="text" name="text" size="100"> <input type="button" value="Set Text" onclick="document.getElementById('text').value='Some Text';"> <input type="button" value="Set other text" onclick="document.getElementById('text').value='Some Other Text';"> </form> </body> </html>

如何使用 Javascript 单击按钮时更改 HTML Div 内容？

我想让用户单击一个按钮来更改 div 的内容。我正在创建一个足球阵容，每个按钮代表一个阵型，当他们单击按钮时，内容......

我可以使用带有多个 id 的 document.getElementById() 吗？

doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4")); 这不起作用，所以我需要逗号或分号才能使其起作用吗？