Javascript error when writing out html instead of dynamically creating element

Question

I have a javascript function that runs fine onclick when the td element is added via javascript. The remove button works fine. But when I create the element with php and click remove, I get:

SyntaxError: syntax error
var header = document.getElementById(

Even though the counter is working correctly. Is this a scope problem? here is my code:

JS

var labor_count = 0;
var part_count = 0;

function incrementLabor(count) {
    labor_count = parseInt(count);
    console.log(labor_count);
}

HTML/PHP

public function getTableRow()
{
    return '
<tr>
<td>
    <input
        type="text"
        name="work_description[]"
        value="'.$this->description.'">
</td>
<td>
    <input
        class="hours calculate"
        type="text"
        name="hours[]"
        value="'.$this->hours.'"
        onchange="calculate();"
        size="2">
</td>
<td>
    <input
        class="rate calculate"
        type="text"
        name="rate[]"
        value="'.$this->rate.'"
        onchange="calculate();"
        size="2">
</td>
<td>
    <input
        type="button"
        value="Remove"
        onclick="
            (function () {
                var parent = this.parentNode.parentNode; //get the row node
                table.deleteRow(parent.rowIndex); //Delete the row index behind it.
                labor_count--;
                console.log(labor_count);
                if (labor_count === 0) {
                    var header = document.getElementById("labor_header");
                    header.parentNode.removeChild(header);
                })()
            };" >
    </td>
</tr>

';
}

Here is the working function:

function removeIt(element) {
        var parent = element.parentNode.parentNode; //get the row node
        var table = parent.parentNode;
        table.deleteRow(parent.rowIndex); //Delete the row index behind it.
        labor_count--;
        console.log(labor_count);
        if (labor_count === 0) {
            var header = document.getElementById("labor_header");
            header.parentNode.removeChild(header);
        }
}

you should avoid inline event bindings altogether

omma2289
– omma2289

2013-08-20 23:00:22 +00:00
Commented Aug 20, 2013 at 23:00 — omma2289
– omma2289, Commented Aug 20, 2013 at 23:00

metadings · Accepted Answer · 2013-08-20 23:21:39Z

3

The quotation mark after getElementById( is closing the onclick=" quotation mark. I suggest naming your function, then calling it in the onclick

<script>
function removeIt(element) {
    var parent = element.parentNode.parentNode; //get the row node
    table.deleteRow(parent.rowIndex); //Delete the row index behind it.
    labor_count--;
    console.log(labor_count);
    if (labor_count === 0) {
        var header = document.getElementById("labor_header");
        header.parentNode.removeChild(header);
    }
} 
</script>

<input
type="button"
value="Remove"
onclick="removeIt(this)"
>

Also, in the php, you should put htmlspecialchars() around $this->description, $this->hours, and $this->rate in case they contain quotation marks or other special characters.

edited Aug 20, 2013 at 23:21

metadings

3,8482 gold badges30 silver badges37 bronze badges

answered Aug 20, 2013 at 23:06

272

1763 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Corey Ray Over a year ago

I copied the code you provided and had to make a few changes but it works!

Fuzzley · Accepted Answer · 2013-08-20 23:06:21Z

1

Your javascript is malformed. Should be

(function () {
    var parent = this.parentNode.parentNode; //get the row node
    table.deleteRow(parent.rowIndex); //Delete the row index behind it.
    labor_count--;
    console.log(labor_count);
    if (labor_count === 0) {
        var header = document.getElementById("labor_header");
        header.parentNode.removeChild(header);
    }
})();

Other than that I would really advise against generating javascript with PHP. You would be a lot better off leaving the javascript in the html file and only generating some html elements.

Also, I would advise against inline event handlers. Instead, attach the event handlers to the html elements using javascript, on page load.

Here is a link to help you out.

edited Aug 20, 2013 at 23:06

answered Aug 20, 2013 at 23:01

Fuzzley

3061 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript error when writing out html instead of dynamically creating element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related