Button event listener doesnt detect string value from textarea

how to display html content in textarea using javascript
how to print value in textarea using javascript
set textarea value javascript
get textarea value javascript
textarea events
innerhtml
textarea selectionstart
getelementbyid

I created a textarea where i can enter a value to be shown on the specific day in my calendar. My problem is that i somehow cannot get the string value to be shown on the specific day in my calendar even though i created a button eventlistener where i save the value in a variable when i click it. Below are the relevant code snippets:

        <textarea placeholder="Gebe dein Termin ein" id="myTextArea" cols="20" rows="5"></textarea>
        <button id="button">Click</button>
if(date === today.getDate() && year === today.getFullYear() && month === today.getMonth()){
                text=btn.addEventListener('click', function(e) {
                    document.getElementById('myTextArea').value;
                  });
                console.log(text)  
                cell.innerHTML="GGGG"

            }

That's not how it works. You can't just assign a variable with an event listener. Instead do this :

var text;
btn.addEventListener('click', function(e) {
  text = document.getElementById('myTextArea').value;
});
console.log(text); 

HTMLTextAreaElement, The HTMLTextAreaElement interface provides special properties and methods This constraint is evaluated only when the value changes. If this message is not the empty string, then the element is suffering from a Listen to these events using addEventListener() or by assigning an event listener to the� In order to detect the text content of input is changed or not, We are using the .on() method of JQuery..on() This is a built-in method provided by jQuery and is used to attach event handlers for the selected elements and their child elements. Syntax: $(selector).on(event, childSel, data, fun, map) parameters: event: This parameter is required

This:

text=btn.addEventListener('click', function(e) {
   document.getElementById('myTextArea').value;
});

Does not do what you think it does.

addEventListener returns undefined. You need to move your logic into the callback you provided.

const btn = document.querySelector("#button");
btn.addEventListener('click', function(e) {
  const text = document.getElementById('myTextArea').value;
  console.log(text);
});
<textarea placeholder="Gebe dein Termin ein" id="myTextArea" cols="20" rows="5"></textarea>
<button id="button">Click</button>

HTMLElement: input event, Event handler property, GlobalEventHandlers.oninput However, historically this has not always been the case. Check compatibility, or use the change event instead for elements of these types. Note: The input event is fired every time the value of the element changes. This is click() � forceSpellCheck(). The first parameter is the type of the event (like "click" or "mousedown" or any other HTML DOM Event.) The second parameter is the function we want to call when the event occurs. The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional.

Welcome to the stack overflow community ;)

In addition to Armedin's answer you can also do the following

var text;

btn.onclick = function(e){
   text = document.getElementById('myTextArea').value;
}

console.log(text); 

Both of these techniques have the same effect.

You can find more details about eventlisteners here

Forms and Form Fields :: Eloquent JavaScript, Form fields do not necessarily have to appear in a <form> tag. Whenever the value of a form field changes, it fires a "change" event. A button with a type attribute of submit will, when pressed, cause the form to be submitted. The following code wires up a <textarea> tag with an event handler that, when you press F2,� When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. useCapture: Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

HTML DOM Textarea Object, You can access a <textarea> element by using getElementById(): cols, Sets or returns the value of the cols attribute of a text area. defaultValue, Sets or of a text area. disabled, Sets or returns whether the text area is disabled, or not and Events. The Textarea object also supports the standard properties and events. This event occurs when the value of an <input> or <textarea> element is changed. Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.

HTML DOM addEventListener() Method, Note: The addEventListener() method is not supported in Internet Explorer 8 and you can use the attachEvent() method to attach event handlers (see "More For example, the "click" event belongs to the MouseEvent object. useCapture, Optional. A Boolean value that specifies whether the event should be executed in the� If this element is not contained in a form element, it can be the id attribute of any <form> element in the same document or the value null. type Read only : string: Returns the string textarea. value: string: Returns / Sets the raw value contained in the control. textLength Read only : long: Returns the codepoint length of the control's value.

.select(), Description: Bind an event handler to the "select" JavaScript event, or trigger This signature does not accept any arguments. This event is limited to <input type="text"> fields and <textarea> boxes. After this code executes, clicks on the Trigger button will also alert the message: <input type="text" value="to test on"> . A Swing text component uses a Document to represent its content. Document events occur when the content of a document changes in any way. You attach a document listener to a text component's document, rather than to the text component itself.