How to pass arguments to an HTML button generated in JavaScript?-CodePudding

I have the next code:

<!DOCTYPE html>
<body>
    <table>
        <tr>
            <td id="toConsole"> Hi I would like to print this in console</td>
        </tr>
        <tr>
            <td><input type="text" id="intext"></td>
        </tr>
        <tr>
            <td id="btnAdd"></td>

        </tr>
    </table>

    <script>
        function addBtnAdd() {
            document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById("toConsole").textContent, document.getElementById("intext"))">Print in console</button>`
        }

        function printBtnAdd(text, inputtext) {
            console.log(text, inputtext)
        }
        addBtnAdd();
    </script>
</body>
</html>

As you can see, I generate a button in JS and I innert it to an td element of a table, with that button I would like to print the Hi I would like to print this in console text in console, and get the value of the input and print it in console too, doing this at the same time by pressing the button that I inner before.

With my code I just get in console the next error:

Uncaught SyntaxError: Unexpected end of input (at pop.html:25:50)

And for instance if I have the next in my page:

I would like to get in console:

'Hi I would like to print this in console', 'Hi'

I hope you can help me, thank you.

CodePudding user response：

This is your issue:

document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById("toConsole").textContent, document.getElementById("intext"))">Print in console</button>`

Note this bit:

<button onclick="printBtnAdd(document.getElementById("

should be:

<button onclick="printBtnAdd(document.getElementById(\"

by unescaping you can fix this problem.

document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById(\"toConsole\").textContent, document.getElementById(\"intext\"))">Print in console</button>

CodePudding user response：

I would change

    <script>
        function addBtnAdd() {
            document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById("toConsole").textContent, document.getElementById("intext"))">Print in console</button>`
        }

        function printBtnAdd(text, inputtext) {
            console.log(text, inputtext)
        }
        addBtnAdd();
    </script>

    <script>
        function addBtnAdd() {
            document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd()">Print in console</button>`
        }

        function printBtnAdd() {
            const text = document.getElementById("toConsole").textContent,
            const inputtext = document.getElementById("intext")
            console.log(text, inputtext)
        }
        addBtnAdd();
    </script>

This keeps your innerHTML a bit cleaner. The downside would be if you wanted to use that function for multiple different things, but if this is all you are using it for it should work just fine.