remove Atrribute "hidden" from a table using DOM shows removeAttribute is not a function

Question

i'm having problems using the dom "removeattribute" when i click on a button i need that the table shows up in the HTML i'm using the next HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="form-group">
        <label for="">Título</label>
        <input type="text" class="form-control" name="" id="titleInput" aria-describedby="helpId"
            placeholder="Título del juego">
    </div>
    <button id="btnIncrementar" onclick="incrementar()">Incrementar</button>
    <button id="btnDecrementar">decrementar</button>
    <button id="pofavo">alertas</button>
    <p id="pcontador">0</p>
    <p id="clickcontador">0</p>
    <table class="table mt-3" hidden>
        <thead>
            <tr>
                <th>Valores </th>
                <th><a href="#" data-toggle="modal" data-target="#modalBoard">Tema1</a></th>
                <th><a href="#" data-toggle="modal" data-target="#modalBoard">Tema2</a></th>
                <th><a href="#" data-toggle="modal" data-target="#modalBoard">Tema3</a></th>
                <th><a href="#" data-toggle="modal" data-target="#modalBoard">Tema4</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row">100</td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema1-100</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema2-100</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema3-100</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema4-100</a></td>
            </tr>
            <tr>
                <td scope="row">200</td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema1-200</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema2-200</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema3-200</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema4-200</a></td>
            </tr>
            <tr>
                <td scope="row">300</td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema1-300</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema2-300</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema3-300</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema4-300</a></td>
            </tr>
            <tr>
                <td scope="row">400</td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema1-400</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema2-400</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema3-400</a></td>
                <td><a href="#" data-toggle="modal" data-target="#modalBoard">Pregunta:Tema4-400</a></td>
            </tr>
        </tbody>
    </table>
    <script src="./handler.js"></script>
    First Name: <input type="text" id="myText" >

<p>Click the button to display the value of the value attribute of the text field.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("titleInput").value;
  document.getElementById("demo").innerHTML = x;
}
</script>
    
</body>
</html>

with the following handler.js

"use strict";

btnDecrementar.onclick= decrementar;
btnIncrementar.addEventListener('click',contaclicks);
btnDecrementar.addEventListener('click',contaclicks);
let maintable = document.getElementsByTagName("table");
function incrementar(){
    let valor = Number(pcontador.innerText);
    valor=valor+1;
    pcontador.innerText = valor;
}
function decrementar(){
    let valor = Number(pcontador.innerText)
    valor=valor-1;
    pcontador.innerText = valor;
    
    maintable.removeAttribute('hidden');
    maintable=maintable;
}

function contaclicks(){
    let valor = Number(clickcontador.innerText)
    valor=valor+1;
    clickcontador.innerText = valor;
}
titleInput.addEventListener('keyup',bten);;
function bten(){
    var x = document.getElementById("titleInput");
    x.value = x.value.toUpperCase();
}

i tried using getelementsbyclass and it returned se same failure "handler.js:18 Uncaught TypeError: maintable.removeAttribute is not a function"

`document.getElementsByTagName` will return an HTMLCollection (an array-like element), so you need to get the first index or query them by `querySelector`. — SMAKSS, Oct 29 '22 at 22:17

score 1 · Accepted Answer · answered Oct 29 '22 at 22:16

1

You are using:

let maintable = document.getElementsByTagName("table");

It returns a Node List, so you should use:

 let maintable = document.getElementsByTagName("table")[0];

answered Oct 29 '22 at 22:16

ManuelMB

1,254
2
8
16

remove Atrribute "hidden" from a table using DOM shows removeAttribute is not a function

1 Answers1