按钮未单击 HTML 和 JavaScript

Question

My question is the following in JavaScipt and HTML:

let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener('сlick', function () {
   let textValue = text.value;
   console.log("The input is " + textValue)
});

I am sure I connected the HTML to JS correctly via the script attribute.

<div class="input">
    <h3 id="inputText">Ввод:</h3>
    <input id="inputForm" />
    <button id="button">Добавить</button>
</div>

Here is the part of the Code I want to work, but the Button has no effects. Initially I was putting a lot of fonts on a button and input field in css, but then I deleted them and it still doesn't work. By work I mean to print the input of the input field to the console.

Answer 1

I don't know what it was, but you had some weird character in there I think... all I did was removing the click and the bracket from the AddEventListener function and rewrite it. Strange, I have to admit. Just textValue.Value is wrong it needs to be lowercase textValue.value otherwise it was completely fine. For all reading, this create a snippet and try run with textValue.value this was not the mistake. The event listener wasn't set up somehow.

 let submit = document.getElementById("button"); let text = document.getElementById("inputForm"); submit.addEventListener("click", function () { let textValue = text.value; console.log("The input is " + textValue) });

 <div class="input"> <h3 id="inputText">Ввод:</h3> <input id="inputForm" /> <button id="button">Добавить</button> </div>

Edit: so I couldn't leave this open, because many of you and myself were confused by which char could it be. I analyzed it in Notepad++ and wanted to see all chars but there was no invisible char like CR or LF. My next thought was the encoding because @vnikonov_63 was writing cyrillic chars inside his html. What I did was transform the code to Windows-1251 ( https://de.wikipedia.org/wiki/Windows-1251 ) and there you can see the result...

submit.addEventListener('СЃlick', function () {

Everything is the same but not the c . I compared Windows-1251 (cyrillic) and Windows-1250 ( https://de.wikipedia.org/wiki/Windows-1250 Middle European) Encodings and the c has the exact same Position. So all of this is just some encoding issue. Surely a c which is not really a c as javascript expects it, won't set up a eventlistener because javascript doesn't know a event called СЃlick . As I am not an expert with encodings i can't explain to you why the СЃ shows up as an c but i am pretty sure that was the problem.

Answer 2

I would work with the form tag. There is an event for submit when you click the submit button which is type of submit.

code:

 document.querySelector("form").addEventListener("submit", (e) => { var text = document.querySelector("#inputForm"); console.log(text.value); });

 <form action="javascript:void(0);"> <h3 id="inputText">Ввод:</h3> <input id="inputForm" /> <button type="submit">Добавить</button> </form>

Answer 3

The issue is with the Value property. It should be.value.

let submit = document.getElementById("button");
let text = document.getElementById("inputForm");

submit.addEventListener('click', function () {
  let textValue = text.value;
  console.log("The input is : " + textValue);
});