How can I pass an <img> tag as a JavaScript argument?

Question

NO JQUERY PLEASE

So I'm trying to create a function that takes 3 arguments, the ID of a checkbox, the ID of the desired element. It checks if the specified is checked, then changes the specified table cell to content of my choice. Here, specifically, I want the content to contain an image ( <img> ) when the checkbox is checked when the "Done" button is pressed.

<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>

I tried this first with just placing the specified tag with all the styling and such inside the function, and it worked fine:

<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">";
                    }

Now I'm just trying to incorporate an img argument so I can call the function with whatever I want. I've tried a few ways to implement this, including this way , but I might have screwed it up somewhere. Please help.

Here is a picture of what the page looks like on the site

Answer 1

Ditto for most of the comments.

This works for me (assuming I understand the problem).

I made up an image display since it was not accessable to me.

The button CSS was missing as well.

 // 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>