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"
>Solution :
You are using:
let maintable = document.getElementsByTagName("table");
It returns a Node List, so you should use:
let maintable = document.getElementsByTagName("table")[0];