Hide fifth row of a table

Question

I have a html document with a table with five rows.

I want to hide the last row of the table when the selected value is not 1.

var tabla = document.getElementsByTagName('table')[0];
var fila = tabla.rows[4];
var selección = document.getElementById('vinculo');
selección.onchange = function() {procesar_cambio()};
function procesar_cambio() {
    console.log('Procesar cambio. Ahora el valor es ' + selección.value + '.');
    if (selección.value === 1) {
        fila.display = '';
    } else {
        fila.display = 'none';
    }
}

The code is not hiding the last row of the table.

What is wrong with this code?

Answer 1

Try fila.style.display = 'none';

Answer 2

Two issues in your code:

1. The input value of the element is string type, since you are using === to compare the value you have to convert the value to number.

2. display property belongs to the style property of the element.

Try

if (Number(selección.value) === 1) {
    fila.style.display = 'block';
} else {
    fila.style.display = 'none';
}