Блог

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

Присвоить значение текстового поля переменной в теле HTML и передать нескольким функциям

#javascript #html #function #variables #textbox

#javascript #HTML #функция #переменные #текстовое поле

Вопрос:

Предположим, что у меня есть несколько кнопок и 1 текстовое поле на моей странице.

Каждая кнопка вызывает другую функцию в JS, но они передают значение одного и того же текстового поля этой функции.

Мне нужно получить значение текстового поля один раз, присвоить его переменной и оттуда передать переменную функциям. Поэтому вместо того, чтобы писать «document.getElementById(‘textbox1’).value» каждый раз для перехода к функциям, просто передайте имя переменной.

Поэтому вместо этого:

 <input type="button" value="button1" onclick="function**1**(document.getElementById('textbox1').value)"/>

<input type="button" value="button1" onclick="function**2**(document.getElementById('textbox1').value)"/>

Я хочу увидеть это

 x = document.getElementById('textbox1').value # **THIS IS THE LINE I DON"T KNOW HOW TO DEFINE**

<input type="button" value="button1" onclick="function**1**(x)"/>

<input type="button" value="button1" onclick="function**2**(x)"/>

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

1. Почему вы хотите написать встроенный JavaScript ?! просто добавьте тег script и напишите в нем свой код

Ответ №1:

Вы можете использовать обработчик событий jQuery «изменить» и получить входное значение. Затем привяжите его к переменной и используйте в любой функции. Вам не нужно передавать его в качестве параметра, потому что он уже определен вверху. и вы можете ссылаться на него внутри функции.

 var funcParam = "";
$("#textbox1").change(function(){
  funcParam = $("#textbox1").val();
});

function function1(){
  console.log(funcParam)
}

function function2(){
  console.log(funcParam)
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<input type="text" id="textbox1"/>
<input type="button" value="button1" onclick="function1()"/>
<input type="button" value="button2" onclick="function2()"/>
</html>