JS, HTML, CSS — getElementById.value. Почему не работает программа? [дубликат]

145

01 марта 2018, 14:02

На данный вопрос уже ответили:

получить значение тега <input> JS 1 ответ

Здравствуйте! Я делаю программу "симулятор аукциона" и у меня возникла проблема. У меня есть два параграфа, изображение, заголовок, два инпута и кнопка. Я хочу, чтобы при нажатии на кнопку с помощью document.getElementById('id').value записывались в объект value двух инпутов и их значения переносились к двум параграфам. Например я ввел 1 в первый инпут и 2 во второй и при нажатии на кнопку к параграфам приписывалось значение введенных мной данных в первом и втором инпуте, то есть 1 и 2.
Я со всем этим справился на по какой-то причине программа не работает правильно.Value не считывает введенные данные. Я пришел к этому выводу вывев на экран с помощью alert значение полученных мной данных, которые я ввел и в любом случае я получаю пустой alert. То есть alert без всякого значения. Помогите, пожалуйста, разобраться в чем проблема.

var data = { 
  name: document.getElementById('name_input').value, 
  bid: document.getElementById('bid_current_input').value 
} 
 
document.getElementById('btn').onclick = function() { 
  alert(data.name) 
  document.getElementById('cur_bid').innerHTML = 'Current Bid: ' + data.bid; 
  document.getElementById('name').innerHTML = 'Name: ' + data.name; 
}

h1 { 
  font-family: Arial; 
  font-size: 200%; 
  font-weight: lighter; 
  text-align: center; 
} 
 
.text { 
  font-family: Arial; 
  font-size: 120%; 
} 
 
.input { 
  margin-left: 492px; 
} 
 
.input1 { 
  margin-left: 492px; 
}

<h1>Auction</h1> 
<p id='cur_bid' class='text'>Current Bid: </p> 
<p id='name' class='text'>Name: </p> 
<p align="center"><img src="images/jiraffe.jpg" alt="Jiraffe"></p> 
<input id='name_input' class='input1'> Name</input><br> 
<input id='bid_current_input' class='input'> Bid Current</input><br> 
<button id='btn' class='input1'>Bid</button>

Answer 1

Все и так работало, просто, когда объект data был вне функции, его данные на момент работы функции не изменялись

document.getElementById('btn').onclick = function() { 
  var data = { 
    name: document.getElementById('name_input').value, 
    bid: document.getElementById('bid_current_input').value 
  } 
 
  document.getElementById('cur_bid').innerHTML = 'Current Bid: ' + data.bid; 
  document.getElementById('name').innerHTML = 'Name: ' + data.name; 
}

h1 { 
  font-family: Arial; 
  font-size: 200%; 
  font-weight: lighter; 
  text-align: center; 
} 
 
.text { 
  font-family: Arial; 
  font-size: 120%; 
} 
 
.input { 
  margin-left: 492px; 
} 
 
.input1 { 
  margin-left: 492px; 
}

<h1>Auction</h1> 
<p id='cur_bid' class='text'>Current Bid: </p> 
<p id='name' class='text'>Name: </p> 
<p align="center"><img src="images/jiraffe.jpg" alt="Jiraffe"></p> 
<input id='name_input' class='input1'> Name</input><br> 
<input id='bid_current_input' class='input'> Bid Current</input><br> 
<button id='btn' class='input1'>Bid</button>

Answer 2

В вашем коде вы когда создаёте объект data у вас сразу берутся name и bid. То есть как они введены при запуске страницы. А вам нужно их брать динамически.

Я отредактировал ваш код, что бы он работал, и сделал name и bid функциями гетерами.

var data = { 
  get name() { 
    return document.getElementById('name_input').value 
  }, 
  get bid() { 
    return document.getElementById('bid_current_input').value 
  } 
} 
 
document.getElementById('btn').onclick = function() { 
  alert(data.name) 
  document.getElementById('cur_bid').innerHTML = 'Current Bid: ' + data.bid; 
  document.getElementById('name').innerHTML = 'Name: ' + data.name; 
}

h1 { 
  font-family: Arial; 
  font-size: 200%; 
  font-weight: lighter; 
  text-align: center; 
} 
 
.text { 
  font-family: Arial; 
  font-size: 120%; 
} 
 
.input { 
  margin-left: 492px; 
} 
 
.input1 { 
  margin-left: 492px; 
}

<h1>Auction</h1> 
<p id='cur_bid' class='text'>Current Bid: </p> 
<p id='name' class='text'>Name: </p> 
<p align="center"><img src="images/jiraffe.jpg" alt="Jiraffe"></p> 
<input id='name_input' class='input1'> Name</input><br> 
<input id='bid_current_input' class='input'> Bid Current</input><br> 
<button id='btn' class='input1'>Bid</button>

Можно и по другому сделать, определив функции GetName и GetBid прямо в глобальном пространстве, без общего контейнера data.