I have some code, but for some reason my `onlick="click()" is not being detected.

Here is the code:

function click () {
  //Just for display purposes ON STACKOVERFLOW
  document.write("It worked!!!"); 
  name = document.getElementById("name").value; 
  document.getElementById("name").innerText = ""; 
  agenda.push(name); 
}
.add {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0;
  padding: 12px 0 10px 10px;
  background-color: #e9ecef;
  box-shadow: 3px 3px 10px #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.1s ease-in-out;
  width: 700px; 
}

.add:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 3px 3px 10px #d0ebff;
  transition: all 0.1s ease-in-out;
}

.add .submit {
  stroke: #adb5bd;
  transition: stroke 0.1s ease-in-out;
}

.add:hover .submit {
  stroke: #495057;
  transition: stroke 0.1s ease-in-out;
  cursor: pointer; 
}

.submit {
  margin-left: auto;
  padding: 0 10px;
}

input[type=text] {
    padding: 5px;
    margin: 0 10px;
    border: 2px solid #ced4da;
    border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="add" class="add">Add item: <input type="text" id="name" class="name" placeholder="Enter item name" autocomplete="off">
    <button id="submit" class="submit" onclick="click();">Add</button>
    </span>

I am receiving no error or anything, and I know that the function click() actually works, as I already tried calling it from the console, which also implies that the link between the JavaScript and HTML file(s) is working, as otherwise, the console wouldn't know what click() is. Therefore, I know that the problem is with the actual HTML code.

Thanks.

0 Answers