Cześć, szukam i szukam błędu ale nie widzę. Czemu nie działa mi ten kod? Po kliknięciu na przycisk OFF, chcę zmienić tekst w komórce obok.
var offButton = document.getElementById("off-btn");
var status = document.getElementById("myTd");
offButton.addEventListener("click", activateItem);
function activateItem(){
status.innerHTML = "off"; // tu nie działa
if(offButton.classList.contains("btn-danger")){
offButton.classList.remove("btn-danger");
offButton.classList.add("btn-success");
offButton.innerHTML = "ON";
}
else{
offButton.classList.remove("btn-success");
offButton.classList.add("btn-danger");
offButton.innerHTML = "OFF";
}
}
<html>
<head>
<title>Inteligentny dom</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Inteligentny dom interfejs</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Światło</a>
<div class="dropdown-menu dropdown-primary text-center" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="index.php">Poziom 1 (wizualizacja)</a>
<a class="dropdown-item" href="swiatlo2.php">Poziom 2 (konfiguracja)</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gniazdka</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Temperatura</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Brama garażowa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Baza danych</a>
</li>
</ul>
</div>
</nav>
<div class="table_data table-responsive">
<table id="mytable" class="table table-bordered">
<thead>
<tr>
<th scope="col">Obszar</th>
<th scope="col">Poziom</th>
<th scope="col">Pomieszczenie</th>
<th scope="col">Nazwa</th>
<th class="bg-warning"scope="col">Stan
<select class="filter select" data-col="2">
<option value="">Pokaż wszystkie</option>
<option value="1">on</option>
<option value="2">off</option>
</select>
</th>
<th class="bg-warning"scope="col">Zmiana stanu portu</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dom</td>
<td>Piwnica</td>
<td>Piwnica</td>
<td>Duża</td>
<td>off</td>
<td>
<button class="btn btn-success">ON</button>
</td>
</tr>
<tr>
<td>Działka</td>
<td>Parter</td>
<td>Ogród</td>
<td>Domowy</td>
<td>off</td>
<td>
<button class="btn btn-success">ON</button>
</td>
</tr>
<tr>
<td>Dom</td>
<td>Piętro</td>
<td>Łazienka</td>
<td>Domowa</td>
<td id="myTd">on</span></td>
<td>
<button class="btn btn-danger" id="off-btn">OFF</button>
</td>
</tr>
<tr>
<td>Dom</td>
<td>Strych</td>
<td>Strych</td>
<td>Domowy</td>
<td>off</td>
<td>
<button class="btn btn-success">ON</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="sorting.js"></script>
<script src="script.js"></script>
</body>
</html>