Введите код, измените отображаемую цену при нажатии пользователем.

Question

У меня есть кусок веб-сайта, который я должен разрешить пользователю вводить код и отображать изменение цены. Код произволен, поскольку фактическая цена - это цена, которую код будет вызывать для отображения - я просто хотел, чтобы пользователь почувствовал, что он «особенный».

<h1 style="text-align: center;">Your choice for a one-time investment of just:</br> 
<a title="JUST $797" href="http://samplesite.com" target="_blank">$797</a></h1> 
<p style="text-align: center;"><strong>If you'd prefer a totally custom design, <a title="Custom Mobile Site Design" href="http://samplesite.com" target="_blank">click here</a>.</strong></p> 
<center><input type="text" id="EnterCode" /><div id="price" value="Code">Enter Code</div></center> 

(Ссылка на «титул =» линия есть, потому что тема, я использую не позволит мне изменить цвет шрифта, так, чтобы заставить его использовать цвет, который я хочу, у меня есть чтобы заставить его думать, что это ссылка. Мне нужно будет войти в css и поменять его позже)

Итак, учитывая приведенный выше код, текущая цена составляет 797 долларов США. Когда пользователь вводит ЛЮБОЙ код и нажимает enter, я бы хотел, чтобы $ 797 изменился до $ 397.

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

Спасибо!

Answer 1

Прежде всего, вам нужно добавить идентификатор в свой тег <a>, содержащий код. Что-то вроде этого:

<a id="yourPriceId" title="JUST $797" href="http://samplesite.com" target="_blank">$797</a> 

Тогда вы можете легко использовать Javascript, чтобы делать то, что вы хотите, с помощью прослушивателя событий, который проверяет, если пользователь нажал клавишу Enter, как это:

var input = document.getElementById("EnterCode"), 
    price = document.getElementById("yourPriceId"); 

input.addEventListener('keyup', function(e) { 
    if (e.keyCode === 13 && !!this.value) { 
     price.textContent = "$397"; 
    } 
}); 

Примечание : это будет работать, только если пользователь вводит что-то на входе, прежде чем нажимать Enter. Если вы хотите присвоить цену, даже если пользователь ничего не вводит, просто удалите && !!this.value из инструкции if.