Issue
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.
Solution
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>
To
<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.
Answered By - Weylin Morris Answer Checked By - Mildred Charles (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.