Форум

Макс Ланкастер · #1 (**permalink**) 01.05.2020, 15:41

Добрый день! Я только начал знакомство с JavaScript. Преподаватель дал задание создать страницу с полем ввода <input type="text">, кнопкой <input type="button"> и строкой <p></p>. А работать это должно так:
Пользователь вводит промокод в поле ввода;
Нажимает на кнопку;
Промокод сверяется с заданными промо в блоке данных;
Если промо введенный пользователем совпал с теми что в блоке, то к имеющемуся у юзера числу баллов прибавляется число баллов закрепленные за введенным промокодом;
Результат, число баллов, выводится в строке.

У меня начало выглядит так:

index.html

<body>
<input class="text" type="text" />
<input class="button" type="button" value="Получить бонус" />
<p class="result"></p>
</body>
<script src="/script.js"></script>

script.js

import market from "./moduls/moduls.js";

let text = document.querySelector(".text");
let res = document.querySelector(".result");
let button = document.querySelector(".button");

const promo = (...users) => {};

moduls.js

const market = [
{ name: "Rick", bonus: 0 },
{ promo: 333, points: 10 },
{ promo: 222, points: 100 },
{ promo: 111, points: 1000 },
{ promo: 000, points: 10000 },
];
export default market;

Я понимаю что много хочу но буду бесконечно благодарен вам за помощь.

рони · #2 (**permalink**) 01.05.2020, 16:26

Макс Ланкастер,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

  <script>
document.addEventListener( "DOMContentLoaded" , function() {
let text = document.querySelector(".text");
let res = document.querySelector(".result");
let button = document.querySelector(".button");
const market = [
{ name: "Rick", bonus: 0 },
{ promo: 333, points: 10 },
{ promo: 222, points: 100 },
{ promo: 111, points: 1000 },
{ promo: 000, points: 10000 },
];
button.addEventListener("click", () => {
const data = market.find(({name})=> name);
const {points} = market.find(({promo})=> promo == text.value)||{points : 0};
if(points) data.bonus += points;
res.innerHTML += `<br>${data.name}, по коду ${text.value}  ${points ? 'бонус: ' + points : 'ничего нет'}, всего: ${data.bonus}`;
text.value = ''
})
  });
  </script>

</head>
<body>
<input class="text" type="text" />
<input class="button" type="button" value="Получить бонус" />
<p class="result"></p>
</body>
</html>

Макс Ланкастер · #3 (**permalink**) 02.05.2020, 10:56

Большое спасибо, все отлично работает. Пойду разбирать код, чтобы в дальнейшем мог создать подобное самостоятельно. Ещё раз огромное спасибо.

Форум

Справочник

Discord чат

Курсы javascript