Как я могу изменить содержание абзаца по нажатию кнопки с оператором if? - PullRequest
Новая
       5

Как я могу изменить содержание абзаца по нажатию кнопки с оператором if?

1 голос
/ 13 февраля 2020

Попытка отобразить разные сообщения внутри элемента p, когда кто-то нажимает на одну из трех кнопок. Но он отображает только первое сообщение (ответ) для всех кнопок.

Не вижу, что я сделал неправильно ...

HTML

<div class="options">
   <div id="good" class="btn"></div>
   <div id="idk" class="btn"></div>
   <div id="bad" class="btn"></div>
</div>

JavaScript

let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
let reply;

document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
  option.addEventListener("click", () => {
      if (good.clicked = true) {
          main.style.display = "block";
          reply = "Hey";
        } else if (idk.clicked = true) {
          main.style.display = "block";
          reply = "Well yeah";
        } else if (bad.clicked = true) {
          main.style.display = "block";
          reply = "123";
        }
        document.getElementById("reply").innerHTML = reply;
    });
});

Ответы [ 6 ]

1 голос
/ 13 февраля 2020 

const good = document.getElementById("good");
const idk = document.getElementById("idk");
const bad = document.getElementById("bad");
const main = document.querySelector(".main");
const reply = document.getElementById("reply");

const messageTypes = {
  good: 'Hey',
  idk: 'Well yeah',
  bad: '123 BAD'
};

[good, idk, bad].forEach(option => {
  option.addEventListener("click", (e) => {
    reply.innerHTML = messageTypes[e.target.id];
  });
});
<div class="options">
<button id="good" class="btn">good</button>
<button id="idk" class="btn">idk</button>
<button id="bad" class="btn">bad</button>
</div>
<div class="main"><div>
<div id="reply"></div>
Используйте const для всего, создайте отдельный словарь сообщений для каждого сообщения и просто сопоставьте его с идентификатором. Вам не нужно использовать jQuery.
1 голос
/ 13 февраля 2020

Это может быть что-то вроде этого: 

let good = document.getElementById("good");
    let idk = document.getElementById("idk");
    let bad = document.getElementById("bad");
    let main = document.querySelector(".main");
    let reply;

    [good, idk, bad].forEach(option => {
      option.addEventListener("click", (e) => {
        if (e.target == good) {
          main.style.display = "block";
          reply = "Hey";
        } else if (e.target == idk) {
          main.style.display = "block";
          reply = "Well yeah";
        } else if (e.target == bad) {
          main.style.display = "block";
          reply = "123";
        }
        document.getElementById("reply").innerHTML = reply;
      });
    });
<div class="options">
<div id="good" class="btn">good</div>
<div id="idk" class="btn">idk</div>
<div id="bad" class="btn">bad</div>
</div>
<div class="main"><div>
<div id="reply"></div>
1 голос
/ 13 февраля 2020

Если ваш реальный вариант использования такой же простой, как и ваш пример, я бы подумал, возможно, использовать разные прослушиватели событий с разными логиками c внутри них. Но если вы хотите использовать тот же прослушиватель событий, то вы можете использовать event.target.id, чтобы узнать, какая кнопка была нажата: 

[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
  option.addEventListener("click", (event) => {
    switch (event.target.id) {
      case "good":
        reply = "Hey";
        break;
      case "idk":
        reply = "Well yeah";
        break;
      case "bad":
        reply = "123";
        break;
    }
    main.style.display = "block";
    document.getElementById("reply").innerHTML = reply;
  });
});

Здесь вы можете увидеть, как она работает (обратите внимание, что я удалил main.style.display = "block"; в следующий пример, так как я не знаю, что main в вашем исходном коде): 

[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
  option.addEventListener("click", (event) => {
    switch (event.target.id) {
      case "good":
        reply = "Hey";
        break;
      case "idk":
        reply = "Well yeah";
        break;
      case "bad":
        reply = "123";
        break;
    }
    document.getElementById("reply").innerHTML = reply;
  });
});
<div class="options">
<div id="good" class="btn">good</div>
<div id="idk" class="btn">idk</div>
<div id="bad" class="btn">bad</div>
</div>
<div id="reply"/>
0 голосов
/ 13 февраля 2020

Я бы соблазнился использовать явные обработчики событий для каждой из кнопок, а не универсальный обработчик c, который затем проверяет все три условия.

Вы можете уменьшить дублирование кода, используя функцию для обработайте обновление дисплея элемента main и настройку reply.

Что-то вроде следующего показывает это в действии: 

let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");

good.addEventListener("click", function(e) {
  showMain("Good");
});

idk.addEventListener("click", function(e) {
  showMain("Well yeah");
});

bad.addEventListener("click", function(e) {
  showMain("123");
});

function showMain(replyText) {
  main.style.display = "block";
  document.getElementById("reply").innerHTML = replyText;
}
.main {
  background-color: red;
  display: none;
  height: 100px;
  width: 100px;
}
<button id="good">Good</button>
<button id="idk">Idk</button>
<button id="bad">Bad</button>
<div class="main"></div>
<div id="reply"></div>
0 голосов
/ 13 февраля 2020

= используется для назначений, однако == используется для проверки равенства двух строк в javascript

   [] ...addEventListener("click", (e) => {
    if (good.id == e.target.id) {
      main.style.display = "block";
      reply = "Hey";
    } 
    // and so on
    document.getElementById("reply").innerHTML = reply;
  });


var btn1=document.getElementById('btn1')
var btn2=document.getElementById('btn2')
var btn3=document.getElementById('btn3')
// jquery way
$('.btn').on("click",function(e){
    $("#msg").html(e.target.id+" clicked");
})
// javascript way
var classname = document.getElementsByClassName("btn");
for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener("click", function(e){  
     document.getElementById('msg').innerHTML =e.target.id+' clicked';
    })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input type="button" id="btn1" class="btn" value="button 1">
<input type="button" id="btn2" class="btn" value="button 2">
<input type="button" id="btn3" class="btn" value="button 3">
<p id="msg"></p>
0 голосов
/ 13 февраля 2020

Вместо этого вы можете сделать что-то подобное для того, что хотите

В Pure Vanilla JS

[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
  option.addEventListener("click", (event) => {
    if (event.target.id == "good") {
      main.style.display = "block";
      reply = "Hey";
    } else if (event.target.id == "idk") {
      main.style.display = "block";
      reply = "Well yeah";
    } else if (event.target.id == "bad") {
      main.style.display = "block";
      reply = "123";
    }
    document.getElementById("reply").innerHTML = reply;
  });
});
...