Помогите получить текст при вводе в textarea в браузере

Question

Пишу конвертер регистра текста, но не выходит получить ввод из textarea на странице для дальнейшего его преобразования.

const textArea = document.getElementById("text-area");
let inputText = document.getElementById("text-area").value;

//buttons
const upperCase = document.getElementById("upper-case");
const lowerCase = document.getElementById("lower-case");
const properCase = document.getElementById("proper-case");
const sentenceCase = document.getElementById("sentence-case");

//Upper Case
upperCase.addEventListener("click", () => {
  return toUpperCase();
})

function toUpperCase() {
  textArea.textContent = inputText.toUpperCase();
}
//Lower Case
lowerCase.addEventListener("click", () => {
  return toLowerCase();
})

function toLowerCase() {
  textArea.textContent = inputText.toLowerCase();
}
//Proper Case
properCase.addEventListener("click", () => {
  return toProperCase();
})

function toProperCase() {
  textArea.textContent = inputText.split(' ')
    .map(w => w[0].toUpperCase() + w.substring(1).toLowerCase())
    .join(' ');
}
//Sentence Case
sentenceCase.addEventListener("click", () => {
  return toSentenceCase();
})

function toSentenceCase() {
  textArea.textContent = inputText.replace(/(^|\.\s+)(.)/g, (a, b, c) => b + c.toUpperCase());
}

<div class="title">
  <h1>Case Converter</h1>
</div>
<textarea id="text-area" name="textarea" rows="30" cols="190"></textarea>
<button id="upper-case">Upper Case</button>
<button id="lower-case">Lower Case</button>
<button id="proper-case">Proper Case</button>
<button id="sentence-case">Sentence Case</button>

Answer 1

Пример для Uppercase, остальное делается также

const textArea = document.getElementById("text-area");
const upperCase = document.getElementById("upper-case");

//Upper Case
upperCase.addEventListener("click", () => {
  toUpperCase();
})

function toUpperCase() {
  textArea.value = textArea.value.toUpperCase();
}

<div class="title">
  <h1>Case Converter</h1>
</div>
<textarea id="text-area" name="textarea" rows="30" cols="190"></textarea>
<button id="upper-case">Upper Case</button>
<button id="lower-case">Lower Case</button>
<button id="proper-case">Proper Case</button>
<button id="sentence-case">Sentence Case</button>

БЛОГ НА HUSL

Помогите получить текст при вводе в textarea в браузере

Ответы (1 шт):