Показать / Скрыть содержимое на основе ответа кнопки - PullRequest
Новая
       7

Показать / Скрыть содержимое на основе ответа кнопки

0 голосов
/ 30 мая 2018

Я пытаюсь заставить мой код отображать / скрывать блоки кода на основе выбора кнопки.Я очень начинающий с JavaScript.Я почти ничего не знаю о том, как заставить это работать, и это моя первая попытка написать это, и, как и ожидалось, я ужасно потерпел неудачу.Но, надеюсь, вы сможете понять, что я пытаюсь сделать.

HTML: 

<p>Do you want to go for a swim?</p>
<button onclick="#option1-yes" class="option1yes">Yes</button> <button onclick="#option1-no" class="option1no">No</button>

<p id="option1-yes">Let's go to the water park! There's a water park around the corner from you.</p><button onclick="#option2-yes">Sounds Fun</button> <button onclick="#option2-no">I want to do something else</button>

<p id="option1-no">Let's go to the mall! There's a mall 15 miles away from you.</p>
<button onclick="#option3-yes">Sounds Fun</button> <button onclick="#option3-no">I want to do something else</button>

Моя грустная попытка JavaScript: 

var displayOption = function toggleOption() {
  var option1 = document.getElementByClass('option1yes')

  var option2 = document.getElementByClass('option1no')

  if (.click('.option1yes')) {
    option2.style.display = 'none'
  }
  else option1.style.display = 'block'
}

РЕДАКТИРОВАТЬ: Я пытаюсь отобразить первый вопрос, а затем, когда пользователь отвечает на первый вопрос, отображать второй или третий вопрос в зависимости от того, каким был предыдущий ответ.

Любойи вся помощь будет принята с благодарностью !!!!!

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

когда вы показываете один элемент, вы должны скрывать другой, чтобы вы могли вставить идентификатор в каждый элемент, скрыть элементы в начале.Таким образом, поскольку у вас есть идентификатор, вы можете создать функцию onclick и делать все, что захотите, например:

HTML 

<p>Do you want to go for a swim?</p>
<button id="option1yes">Yes</button>
<button id="option1no">No</button>
<p id="option1-yes">Let's go to the water park! There's a water park around the corner from you.</p>
<p id="option1-no">Let's go to the mall! There's a mall 15 miles away from you.</p>

Javascript 

var y = document.getElementById("option1-yes");
var n = document.getElementById("option1-no");
y.style.display = "none";
n.style.display = "none";

document.getElementById("option1yes").onclick = function () {
    y.style.display = "block";
    n.style.display = "none";
};

document.getElementById("option1no").onclick = function () {
    y.style.display = "none";
  n.style.display = "block";
};

Демо

0 голосов
/ 30 мая 2018

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

1) в HTML onclick атрибут для кнопки традиционно используется для вызова некоторой функции JavaScript ... onclick="test()" вызовет function test(){...} в вашем JS.Использование хеш-идентификатора на самом деле ничего не дает (в тегах привязки атрибут href + хеш-идентификатор позволяет браузеру переходить к разделу на странице <a href="#content-section">)

2) Объявление вашей функции var displayOption = function toggleOption() может быть действительным, но неясно, как читать (по крайней мере, для меня).Как называется ваша функция?toggleOption () displayOption ()?

2b) Кроме того, нет ничего, что вызывало бы вашу функцию, чтобы фактически запустить вещи.У вас весь код закручен в displayOption (), но нет ничего, что вызывало бы его для запуска вашего вложенного кода.

3) .click() в традиционном JavaScript просто используется как метод для вызова действия click - этоне верный / ложный тест.Если вы сделали option1.click(), чтобы программно щелкнуть по вашему элементу option1, например, щелчком мыши)

3b) Для прослушивания события щелчка мой любимый подход - element.addEventListener('click', function(){ .. } ) - это установит ваш JavaScript для прослушивания, если/ когда нажимается эта кнопка конкретного элемента, а затем выполняется соответствующий код https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

4) Насколько мне известно, .getElementByClass() не существует - однако существует .getElementsByClassName(), что важно отметитьон вернет узел список https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName

4b) Поскольку вы нацеливаетесь на конкретные элементы, вы можете назначить им идентификаторы, а затем использовать .getElementById(), чтобы подключить их к вашему JavaScript https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById, который будет возвращать только первый соответствующий результат. 

var option1yes = document.getElementById('option1yes')
var option1no  = document.getElementById('option1no')

option1yes.addEventListener('click', function(){
    option1no.style.display = 'none';
});
<p>Do you want to go for a swim?</p>
<button id="option1yes">Yes</button> 
<button id="option1no">No</button>

<p>Let's go to the water park! There's a water park around the corner from you.</p>
<button id="option2-yes">Sounds Fun</button> 
<button id="option2-no">I want to do something else</button>

<p>Let's go to the mall! There's a mall 15 miles away from you.</p>
<button id="option3-yes">Sounds Fun</button> 
<button id="option3-no">I want to do something else</button>

ОБНОВЛЕНИЕ

Хорошо, чтобы скрыть и показать разделы веб-страницы, есть пара первых шагов, на которых можно основываться.предыдущие пункты здесь:)

1) Вам нужно будет изолировать разделы, которые вы хотите скрыть / показать в своих собственных контейнерах - обычно разработчики используют для этого div s.

1b) в этом примере я поместил последующие вопросы в div s и дал им оба уникальных идентификатора, чтобы мы могли легче ориентировать их в JavaScript.У них также есть тот же класс CSS .hidden, который обсуждается в пункте №2:)

2) Ваши разделы должны начинаться скрытыми, это можно сделать с некоторыми CSS

2b) в этомНапример, я создал класс CSS с именем .hidden, добавив его к элементу, значение CSS для него будет установлено на display: hidden; (сняв его с помощью JavaScript, элемент вернется к своему отображаемому значению по умолчанию)

2c) вы можете использовать element.className="" https://developer.mozilla.org/en-US/docs/Web/API/Element/className или element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList - мне нравится .className, но это только то, к чему я привык.

3) Чтобы убедиться, что пользователи могут изменять выбор, JavaScript удаляет класс .hidden из своей предполагаемой цели, но добавляет его обратно в другие разделы div, которые необходимо скрыть. 

var btnYes = document.getElementById('option1yes');
var btnNo  = document.getElementById('option1no');
var optYes = document.getElementById('option1-yes');
var optNo  = document.getElementById('option1-no');

btnYes.addEventListener('click', function(){
  optYes.className = ''; 
  optNo.className = 'hidden';
});

btnNo.addEventListener('click', function(){
  optNo.className = '';
  optYes.className = 'hidden';
});
.hidden{ display: none; }
<p>Do you want to go for a swim?</p>
<button id="option1yes">Yes</button> 
<button id="option1no">No</button>

<div id="option1-yes" class="hidden">
  <p>Let's go to the water park! There's a water park around the corner from you.</p>
  <button id="option2yes">Sounds Fun</button> 
  <button id="option2no">I want to do something else</button>
</div>

<div id="option1-no" class="hidden">
  <p>Let's go to the mall! There's a mall 15 miles away from you.</p>
  <button id="option3yes">Sounds Fun</button> 
  <button id="option3no">I want to do something else</button>
</div>
...