我怎样才能通过<img>标记为 JavaScript 参数？

Question

请没有 JQUERY

所以我正在尝试创建一个 function，它需要 3 个 arguments，复选框的 ID，所需元素的 ID。 它检查是否检查了指定的内容，然后将指定的表格单元格更改为我选择的内容。 在这里，特别是，当按下“完成”按钮时选中复选框时，我希望内容包含图像（ <img> ）。

<table style="width:75%">
            <tr>
                <th>Question</th>
                <th>Done?</th>
                <th>Are you prepared?</th>
            </tr>
            <td>
                <label>
                    <span>Do you have a fire extinguisher in the house?</span>
                    <input type="checkbox" name="A" class="incline checkbox" id="aBox" value="1">
                </label>
            </td>

            <td><input type="button" onclick="doneButton('aBox', 'uno', '<img src=/static/assets/drylands.jpeg height=125 width=125>') class="button button2" value="Done"></td>
            <td><span id="uno"></span></td>

            <script>
                // takes parameters checkbox & desired element
                // assigns checkbox & change to corresponding parameters
                // checks if checkbox is checked...
                // assigns change to a thing
                function doneButton(checkboxId, changeId, content) {
                    var checkbox = document.getElementById(checkboxId);
                    var change = document.getElementById(changeId);
                    if (checkbox.checked) {
                        change.innerHTML = content;
                    }
             </script>
</table>

我首先尝试将带有所有样式的指定标签等放在 function 中，效果很好：

<td><input type="button" onclick="doneButton('aBox', 'uno') class="button button2" value="Done"></td>
            <td><span id="uno"></span></td>

function doneButton(checkboxId, changeId) {
                    var checkbox = document.getElementById(checkboxId);
                    var change = document.getElementById(changeId);
                    if (checkbox.checked) {
                        change.innerHTML = "<img src=/static/assets/drylands.jpeg height=125 width=125>') class="button button2" value="Done">";
                    }

现在我只是想加入一个 img 参数，这样我就可以随心所欲地调用 function 。 我尝试了几种方法来实现这一点， 包括这种方式，但我可能在某个地方搞砸了。 请帮忙。

这是网站上页面的图片

Answer 1

大多数评论同上。

这对我有用（假设我理解这个问题）。

我制作了一个图像显示，因为我无法访问它。

按钮 CSS 也丢失了。

 // takes parameters checkbox & desired element // assigns checkbox & change to corresponding parameters // checks if checkbox is checked... // assigns change to a thing function doneButton(checkboxId, changeId, content) { var checkbox = document.getElementById(checkboxId); var change = document.getElementById(changeId); if (checkbox.checked) { change.innerHTML = content; } } function addImage() { doneButton('aBox', 'uno', '<img src="https://dummyimage.com/125x125/000/fff.jpg&text=drylands.jpg" height=125 width=125>'); } function init() { document.getElementById('btnDone').addEventListener('click', addImage) } init();

 button { /* missing definitions */ }.button2 { /* ditto */ }

 <table style="width:75%"> <tr> <th>Question</th> <th>Done?</th> <th>Are you prepared?</th> </tr> <tr> <td> <label> <span>Do you have a fire extinguisher in the house?</span> <input type="checkbox" name="A" class="incline checkbox" id="aBox" value="1"> </label> </td> <td><input type="button" class="button button2" value="Done" id='btnDone'> </td> <td><span id="uno"></span></td> </table>