Форум

aleks330 · #1 (**permalink**) 10.09.2021, 20:52

Есть приложение для запоминания английских слов:

<div class="hed">
        <h1>Тренажер</h1>
        <h2>для изучения английских слов.</h2>
    </div>
    <div class="wrap">
        <div class="flexss">
           <h1 class="word"></h1>
           <input class="in" type="text"  placeholder="перевод"name="answer" id="iin">
          <button class="sadm">Go</button>
        </div>
        <h1 class="aut "></h1>
</div>

let jes=[
  {"inglih":"father","rus":"отец"},
  {"inglih":"boy" ,"rus":"мальчик"}, 
];

let inp=document.querySelector("#iin");
let word=document.querySelector(".word");
let aut=document.querySelector(".aut")
let batt=document.querySelector(".sadm");

let b=0;
//
let wo=jes[b].inglih;
let ru=jes[b].rus;
word.innerHTML=`${ru}`;
  
 batt.addEventListener( "click",function(){
    let res=inp.value;
    if(res==wo){
      if(aut.classList.contains("coll")){
        aut.classList.remove("coll");
                  }
    aut.innerHTML=`Молодец!Все правильно`;
  }
   else {
       aut.classList.add("coll")
       aut.innerHTML=`Не верно,попробуй еще`;
       
  };})

Один вывод делает а вот как заставить чтоб при выполнении if т.е (правильном ответе) увеличивалась переменная b и вывести данные с другого объекта не пойму.

рони · #2 (**permalink**) 10.09.2021, 21:15

aleks330,
написать функцию вместо строк 14 и 15, и добавить в строку 22

рони · #3 (**permalink**) 10.09.2021, 21:31

aleks330,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .coll {
            border: 2px red solid;
        }

        .sadm:after {
            content: attr(data-txt);
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let jes = [{
                    "inglih": "father",
                    "rus": "отец"
                },
                {
                    "inglih": "boy",
                    "rus": "мальчик"
                },
            ];
            let inp = document.querySelector("#iin");
            let word = document.querySelector(".word");
            let aut = document.querySelector(".aut")
            let batt = document.querySelector(".sadm");
            let b = -1;

            function more() {
                b = ++b % jes.length;
                let ru = jes[b].rus;
                word.innerHTML = `${ru}`;
                aut.innerHTML = '';
                batt.dataset.txt = "Go"
            }
            more();
            batt.addEventListener("click", function() {
                let res = inp.value;
                let wo = jes[b].inglih;
                if (batt.dataset.txt === "More") more();
                else if (res === wo) {
                    aut.classList.remove("coll");
                    batt.dataset.txt = "More";
                    aut.innerHTML = `Молодец!Все правильно`;
                } else {
                    aut.classList.add("coll")
                    aut.innerHTML = `Не верно,попробуй еще`;
                };
            })
        });
    </script>
</head>

<body>
    <div class="hed">
        <h1>Тренажер</h1>
        <h2>для изучения английских слов.</h2>
    </div>
    <div class="wrap">
        <div class="flexss">
            <h1 class="word"></h1>
            <input class="in" type="text" placeholder="перевод" name="answer" id="iin">
            <button class="sadm" data-txt="Go"></button>
        </div>
        <h1 class="aut "></h1>
    </div>
</body>

</html>

aleks330 · #4 (**permalink**) 10.09.2021, 21:31

Тогда и13 и 11 ту да же? Я имею в виду в функцию!

Точно проффесорский ответ абсолютно бесполезный!

aleks330 · #5 (**permalink**) 10.09.2021, 21:48

Пардонте, второй ответ значительно информативней!

aleks330 · #6 (**permalink**) 10.09.2021, 21:50

рони,
Спасибо!!!

рони · #7 (**permalink**) 10.09.2021, 21:52

aleks330,

aleks330 · #8 (**permalink**) 10.09.2021, 22:28

рони,
Гениально особенно вот эти фрагменты

.sadm:after {
            content: attr(data-txt);
        }

let b = -1;

  batt.dataset.txt = "Go"

Такому в школе не научат

aleks330 · #9 (**permalink**) 10.09.2021, 22:40

Я с этим

let b = -1;

голову сломал а всего лиш

b = ++b % jes.length;

и до такой проверки я бы не додумался

if (batt.dataset.txt === "More") more();

Шахматы это детская игра по сравнению с программированием))

aleks330 · #10 (**permalink**) 10.09.2021, 23:44

Предлагаю в функцию more (сигареты с таким названием сразу вспоминаю

)
добавить

inp.value='';

function more() {
      b = ++b % jes.length;
      let ru = jes[b].rus;
      word.innerHTML = `${ru}`;
      aut.innerHTML = '';
      inp.value='';
      batt.dataset.txt = "Go"
  }

Форум

Справочник

Discord чат

Курсы javascript