Как получить значение из поля ввода с помощью Javascript?

Как я могу получить значение определенного поля ввода с помощью Javascript?

Возьмем, к примеру, этот магазин: https://geekymate.com/products/magic-doormat-1?variant=18941211607138

Я пытаюсь создать скрипт, который автоматически применяет код скидки на основе количества, заполненного в поле количества.

Но для этого мне нужно иметь возможность получить последнее значение поля. Как будет выглядеть код для получения последнего/текущего значения?

РЕДАКТИРОВАТЬ: Спасибо за подсказку с вопросом. Я знаю, что мне нужно использовать getElementById (для связанной страницы выше это будет так: var x = document.getElementById("Quanity").value; ), но как мне всегда автоматически получать последний ввод, если конечный пользователь меняется Значение?


javascript data-extraction
person Salexes    schedule 06.03.2019    source источник
comment
Возможный дубликат Как мне получить значение поля ввода текста с помощью JavaScript?   -  person fulvio    schedule 06.03.2019
comment
Спасибо за подсказку с вопросом. Я знаю, что мне нужно использовать getElementById, но как мне всегда автоматически получать последний ввод, если конечный пользователь меняет значение?   -  person Salexes    schedule 06.03.2019
comment
Вы думали о прослушивателе событий для keyup?   -  person Elliot    schedule 06.03.2019
comment
@Эллиот Спасибо за ваш комментарий. Не могли бы вы объяснить немного больше? Я все еще новичок в javascript, и я еще не совсем знаком с ним. Только начал этому учиться.   -  person Salexes    schedule 06.03.2019

Ответы (6)


arrow_upward
2
arrow_downward

Другие ответы также верны (с использованием jQuery .keyup), но вы также можете использовать это решение ниже (что лучше). Это решение использует чистый javascript.

Код выбирает элемент с помощью .getElementById() и использует .addEventListener() для выполнения каких-либо действий при изменении ввода.

var text = document.getElementById("text");
window.onload = function() {
  text.addEventListener("input", function() {
    console.log(text.value);
  });
}
<input id="text" />

Или вы можете использовать следующее, если вам нужно решение jQuery. При этом используется jQuery .bind().

$("#text").bind("input", function() {
  console.log($("#text").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="text" />

person Aniket G    schedule 06.03.2019
comment
Я не знал, что этого так легко добиться! Это действительно показывает, что я все еще на очень начальном этапе изучения javascript и jquery. Большое спасибо за подробные объяснения и фрагменты кода для их тестирования! - person Salexes; 06.03.2019
comment
Я только что столкнулся с этой ошибкой: Невозможно прочитать свойство addEventListener из null. Насколько я понимаю, эта ошибка может быть вызвана тем, что скрипт уже выполняется до завершения загрузки DOM. Это правильно ? Если да, то как убедиться, что он выполняется после завершения загрузки DOM? - person Salexes; 06.03.2019
comment
@Salexes это либо означает, что элемент, к которому вы пытаетесь добавить прослушиватель событий, не существует, либо да. DOM не загрузился. Я обновил свое решение. В этом случае вы должны поставить window.onload перед, как я сделал в обновленном ответе. developer.mozilla.org/en-US/docs/Web/ API/GlobalEventHandlers/, stackoverflow .com/questions/807878/ - person Aniket G; 06.03.2019
comment
Давайте продолжим обсуждение в чате. - person Salexes; 06.03.2019

arrow_upward
1
arrow_downward

keyup() функция ;)

Он запускается каждый раз, когда пользователь вводит новый текст. Кроме того, вы можете использовать функции input() или change().

В jQuery это работает так:

$(document).on('keyup', '#InputID', function(){
    //...code...
    var discount = Number( document.getElementById('InputID').value )*10/100;
});
person Bubu    schedule 06.03.2019

arrow_upward
1
arrow_downward

посмотрите фрагмент кода. используя JavaScript для получения значений. и может использовать addEventListener для обнаружения изменения и использовать функцию detectChange для получения последних значений.

var discount = [];

function detectChange() {
  var table = document.getElementsByClassName("shappify_qb_grid")[0];

  for (var i = 0; i < table.rows.length; i++) {
    var row = "";
    for (var j = 0; j < table.rows[i].cells.length; j++) {
      if (j == 1) {
        row = table.rows[i].cells[j].innerHTML;
        rate = parseFloat(row);
        if (rate && discount.indexOf(rate) < 0) {
          discount.push(parseFloat(row));
          console.log('---', parseFloat(row));
        }
      }
      // console.log('discount : ', discount);
    }
  }
}

detectChange();
console.log('discount : ', discount);
<table class="shappify_qb_grid" border=1>
<thead>
	<tr>
		<th>Qty</th>
		<th>Discount</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Buy 1</td>
		<td>0% Off</td>
	</tr>
	<tr>
		<td>Buy 2</td>
		<td>10% Off</td>
	</tr>
	<tr>
		<td>Buy 4</td>
		<td>12% Off</td>
	</tr>
	<tr>
		<td>Buy 5</td>
		<td>14% Off</td>
	</tr>
	<tr>
		<td>Buy 6</td>
		<td>17% Off</td>
	</tr>
</tbody>
</table>

person Shiv Kumar Baghel    schedule 06.03.2019
comment
Просто чтобы убедиться, что я правильно понимаю код, который вы разместили. Если бы я изменил поле ввода количества, например, на 4 он будет автоматически ассоциироваться со скидкой 12%? Все еще новичок в javascript, поэтому я просто хочу быть уверенным, что понимаю каждый шаг кода. - person Salexes; 06.03.2019

arrow_upward
0
arrow_downward

Это функция Jquery, которая запускается при нажатии клавиши. Я включил фрагмент ниже, чтобы увидеть, как он будет связан с полем ввода.

$('#code').keyup(function() {
    var discountcode = this.value;
    console.log(discountcode);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="code" type="test" />

Keyup запускается каждый раз, когда поднимается определенный элемент. Представьте, что кто-то вводит «Привет»

Вы увидите следующее в журнале:

'H' 'Он' 'Ад' 'Ад' 'Привет'

person Elliot    schedule 06.03.2019
comment
@AniketG Я дорабатывал свой комментарий и все еще писал его, прежде чем увидел ответ ниже. Поскольку у него есть фрагмент кода, и он был опубликован с интервалом в 2 минуты, я не думаю, что это имеет большое значение. - person Elliot; 06.03.2019
comment
вы можете сохранить его, если хотите. Я просто знаю, что одна вещь, которую я ненавижу, это видеть несколько ответов (которые одинаковы). Как и в любом другом случае, я голосую за того, кто поднялся первым. Какой был другой - person Aniket G; 06.03.2019

arrow_upward
0
arrow_downward

Эта работа для меня!

document.getElementById("text").value;

<input id="text" />
person Lennin Lemus    schedule 06.06.2020

arrow_upward
0
arrow_downward

Используйте команду document.getElementById();, чтобы узнать о существовании указанного элемента на вашей HTML-странице. Затем используйте ту же технику назначения атрибутов, что и в исходных правилах кодирования HTML.

Используйте document.getElementById('able').value = 'whatever';.

person Abel Nebay    schedule 27.10.2020
comment
Вопрос в том, чтобы получить значение, а не изменить значение. Есть также ответы более года назад, которые объясняют, как это сделать. - person Barmar; 27.10.2020