Issue with textarea

user_16547196 0
Viewed 51

I have a simple textarea. I want to check this area for text, when you push button and if your textarea is empty it fills it with default email.

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
  if (x.textContent != null) {
    x.textContent = 'defaultmail@gmail.com';
  }
}

btn.addEventListener('click', function(e) {
  e.preventDefault();
  putDefaultMail();
});
<form>
  <textarea id="smth"></textarea>
  <button id="btn">Sumbit</button>
</form>

But something went wrong. It just calls once.

html javascript
2 Answers

textContent is not the proper way of getting values from textarea. And also, a blank textarea's value is "", not null.

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.textContent != null) {
        x.textContent = 'defaultmail@gmail.com';
    }
}

btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});
<form>
                    <textarea id="smth"></textarea>
                    <button id="btn">Sumbit</button>
</form>

Instead, try .value:

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.value == '') {
        x.value = 'defaultmail@gmail.com';
    }
}

btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});
<form>
                    <label>Text: <textarea id="smth"></textarea></label>
                    <button id="btn">Sumbit</button>
</form>

By the way, you should add labels to the controls like above.

However, if the user enters spaces, then it passes. Like @MuhammadAliMalekzadeh said below, trim() should remove the spaces around for you.

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.value
      .trim() // <-- here
    == '') {
        x.value = 'defaultmail@gmail.com';
    }
}

btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});
<form>
                    <label>Write here: <textarea id="smth"></textarea></label>
                    <button id="btn">Sumbit</button>
</form>

user_155781940

Textarea has a value. You should check if value empty or not.

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.value == "") { // if empty 
        x.value = 'defaultmail@gmail.com';
    }
}


btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});
user_119708360
Related