Блог

Главная - Вопросы по программированию - Как я могу использовать функцию JavaScript внутри моего HTML для получения входных данных и предоставления выходных данных?

Как я могу использовать функцию JavaScript внутри моего HTML для получения входных данных и предоставления выходных данных?

#javascript

Вопрос:

Я использую BootStrap 4.

У меня есть следующая функция:

 function AcceptInput(text){does stuff}

У меня есть форма, которая содержит 1 кнопку и текстовую область:

     <form action="" class="container p-3 my-3 bg-dark text-white">
      <div class="form-group">
        <label for="comment">Your Text:</label>
        <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
      </div>
      <button onclick="" type="button" class="btn btn-primary">Submit</button>

    </form>

Я хочу использовать свою функцию AcceptInput в этой форме при нажатии кнопки. Текст из текстового поля необходимо передать в качестве текстовой переменной функции AcceptInput, затем, когда функция возвращает строковое значение, эту строку необходимо записать в другое текстовое поле в качестве вывода. Как мне получить строки из текстового поля и использовать возвращаемое значение в HTML?

Комментарии:

1. Вам не нужна отдельная функция для достижения того, чего вы хотите.

Ответ №1:

Вы можете изменить тип кнопки с «кнопка» на «отправить» — это вызовет событие отправки в форме.

Затем вам нужно добавить прослушиватель событий отправки для этого события — .addEventListener() .

Вам необходимо убедиться, что при отправке формы она не пытается использовать поведение браузера по умолчанию для связи с сервером для использования http — запроса e.preventDefault() .

затем вы можете взять текст, выполнить преобразования с помощью своей функции, а затем вывести преобразованный текст туда, куда вы хотите — здесь я изменил текст на верхний регистр.

Вот код:

 function AcceptInput(text){
    console.log("dbg1 does stuff", text);
  // for eg: converting to upper case
  return text.toUpperCase();
}

var formElem = document.getElementById("mainForm");

formElem.addEventListener("submit", function(e) {
    e.preventDefault();
  var textElem = document.getElementById("comment");
  var text = textElem.value;
  var transformedText = AcceptInput(text);
  var outputElem = document.getElementById("output");
  outputElem.innerText = transformedText;
}) 
 <html>
<body>
    <form id="mainForm" action="" class="container p-3 my-3 bg-dark text-white">
      <div class="form-group">
        <label for="comment">Your Text:</label>
        <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <p id="output"></p>
</body>
</html>

Ответ №2:

Когда вызывается ваша AcceptInput функция, вы можете использовать

 document.getElementsByClassName("form-control")[0].value;

чтобы получить значение внутри текстовой области.

Метки: