Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2020, 18:04
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

Название в input
Есть некий книжный магазин, нужно чтоб при нажатии на кнопку select, название книги и отображалось в форму (input)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Book Store</title>
</head>
<body>
  <h4>BOOK - STORE</h4>
<div class="cont">

<ul>
  <li><img src="img/book 1.png" alt="book 1" height="377px" width="271px">
  <p>Сила личности <br> 100 грн</p>
  <div class="select">Select</div> 
</li>
  
  <li><img src="img/book 2.jpeg" alt="book 2" height="377px" width="271px">
  <p>Сам себе программист <br> 250 грн</p>
  <div class="select">Select</div>
</li>

  <li><img src="img/book 3.jpg" alt="book 3" height="377px" width="271px">
    <p>Зеленая миля <br> 300 грн</p>
    <div class="select">Select</div>
  </li>

  <li><img src="img/book 4.jpg" alt="book 4" height="377px" width="271px">
    <p>Приключения Шерлока Холмса <br> 230 грн</p><div class="select">Select</div></li>
</ul>
<hr>

  <form class="form">
    <p>
          <label for="book"> Book:</label>
          <input id="Input1" type="text" name="name">
          </p>

          <p>
          <label for="Quntity"> Quantity:</label>
          <input id="Input2" type="text" name="name">
          </p>

          <p>
          <label for="name"> Name:</label>
          <input id="Input3" type="text" name="name">
          </p>

          <p>
          <label for="adress">Delivery adress:</label>
          <textarea id="Enter1" name="message" cols="30" rows="5"></textarea>
          </p>

          <p>
          <label for="date"> Date:</label>
          <input id="Input4" type="text" name="name">
          </p>

          <p>
          <label for="coment"> Comment:</label>
          <textarea id="Enter2" name="message" cols="30" rows="5"></textarea>
          </p>
          <div class="buy" id="clean">Buy</div>
         <hr>
  </form>
  
  <div id="tick"></div>
</div> 

<script src="js/script.js"></script>
</body>
</html>


я написал, только оно выводит в input что написано пользователем а как туда передать название?
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.buy').addEventListener('click', () => {
    document.getElementById('tick').innerHTML+=
    `       
      ${ document.querySelector('#Input3').value+", thanks for the order!<br>" }
      ${ 'Book: "'+document.querySelector('#Input1').value+ '" will be delivered on'}
      ${ document.querySelector('#Input4').value+ " to"}
      ${ document.querySelector('#Enter1').value+"<br>" }
      ${ "Quantity: "+document.querySelector('#Input2').value+"<br>" }
      ${ "Сomment: "+document.querySelector('#Enter2').value+"<br><br><hr>" }
    `
  })
   //Очистка поля input после отправки 
    document.getElementById("clean").onclick=function(){
        document.getElementById("Enter").value="";
        document.getElementById("Input").value="";
   }
})
Изображения:
Тип файла: jpg Снимок экрана (1).jpg (20.2 Кб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2020, 20:01
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 370

Ну не используйте вы дивы вместо кнопок.
Есть button.
Есть, так же пользователи, которые часто пользуются клавиатурой. И хотят нажимать на сфокусированной кнопке Enter, а не тыкать в нее мышкой.
А div не обеспечит ни фокусировки, ни ответа на клавиатуру. Все это придется (для нормального сайта) прикручивать отдельно.

document.querySelectorAll('.select').forEach (sel => sel.addEventListener('click', () => {
	document.getElementById("Input1").value = sel.closest('li').querySelector('p').textContent;
   })
)

Последний раз редактировалось voraa, 31.03.2020 в 20:32.
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2020, 22:04
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

voraa,
Ай, спасибо, вы меня выручаете, а что касается button - конечно лучше использовать его, но это просто задание, и тут не разрешено использовать button, sumbit.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как перетащить текст в поле input и записать его в value? firsmember Элементы интерфейса 25 11.11.2019 12:32
Динамическое копирование значения из input в input с одинаковыми атрибутами name ami_moor jQuery 2 10.08.2016 17:02
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 11:03
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 12:55