Can somebody help me find the problem in my code? I can’t make the onclick and maybe classList work [duplicate]

  css, html, javascript, web-deployment

I’m making my first task on JavaScript in my course and can’t seem to get it to work. I’ve been working at it for more than six hours solving previous errors but this one is just out of my head and I can’t understand it at all nor do I currently have access to anyone to help me with this.

The task requires that I make an input field that adds the values entered into a table and when "STOP" is typed in, it shows the table with the values entered.

And also, I haven’t studied jQuery yet and neither am allowed to use it in this task. I apologize for wasting anyone’s time on this but I’d be very grateful for some assistance. Thanks in advance.

Here’s the *CODE that I wrote:

var num = 0

function addRow() {
  enterButton = document.getElementById("enterbtn");
  showTable = document.getElementsByClassName(".blueBox table");
  var tTxt = document.getElementById('enterText').value;

  enterButton.onclick = function() {
    if (tTxt == "STOP") {
      showTable.classList.add("active");
    } else {
      showTable.classList.remove("active");
    }
  }
  var table = document.getElementsByClassName('blueTable')[0];
  var newRow = table.insertRow(table.rows.length);

  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  num++;
  cel1.innerHTML = num;
  cel2.innerHTML = tTxt;
}
.blueBox {
  border: 1px solid blue;
  background-color: rgba(100, 148, 237, 0.63);
  padding: 10px;
  width: 400px;
}

.blueTable {
  padding: 10px;
  margin: 5px;
  border-collapse: collapse;
  opacity: 0;
}

.blueBox.active {
  opacity: 1;
}

td {
  width: 30px;
  border: 1px solid black;
}

#enterText {
  width: 100px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Activity 7</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="blueBox">
    <h1>Enter Value:<input type="text" id="enterText"></h1>
    <button id="enterbtn" onclick="addRow();">Enter</button><br><br>
    <table class="blueTable">
      <tr></tr>
    </table>
  </div>

  <script src="activity7.js"></script>

</body>

</html>

Source: Ask Javascript Questions

LEAVE A COMMENT