0

I have some code, but for some reason my `onclick="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.

Unmitigated
  • 76,500
  • 11
  • 62
  • 80
Arihan Sharma - Sir John A Mac
  • 111
  • 5
  • rename to clickIt - click is reserved – mplungjan May 16 '19 at 14:56
  • _This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers._ – mplungjan May 16 '19 at 14:56
  • 1
    1. Do NOT use the name `click` for the function 2. Do NOT use the id or name `submit` for the button. 3. Do NOT use the id or name `name` for the field. 4. Do NOT use `document.write` after the page has rendered - instead use console.log – mplungjan May 16 '19 at 14:57
  • @epascarello That was because I didn't think that the console shows up on StackOverflow. – Arihan Sharma - Sir John A Mac May 16 '19 at 15:00
  • Also use better variable names: `var agenda = [] document.getElementById("addBut").addEventListener("click", function(e) { e.preventDefault(); console.log("It worked!!!"); var item = document.getElementById("item"), itemValue = item.value; item.select(); item.focus(); agenda.push(itemValue); console.log(agenda) })` – mplungjan May 16 '19 at 15:07

0 Answers0