CODEWITHSUNDEEP
javascripthtml
tera_789
tera_789

Reputation: 529

Displaying content on a webpage based on user input

I have a series of questions presented to a user. Based on what user answers, he/she will see another question or some text. For example, this is my code (simplified):

function layerOne() {
  var radioNo = document.getElementById("radno");
  var radioYes = document.getElementById("radyes");
  var text = document.getElementById("layer-one-yes");

  // Display 2nd question
  if (radioNo.checked == true) {
    radioYes.disabled = true;
  }
  // Deny access
  if (radioYes.checked == true) {
    radioNo.disabled = true;
    text.style.display = "block";
  }
}
#layer-one-yes {
display: none;
}
 <!-- First question -->
 <div id="layer-one">
  <p>Are you under 18?</p>
  <input type="radio" id="radno" onclick="layerOne()"><label for="radno">No</label>
  
  <input type="radio" id="radyes" onclick="layerOne()"><label for="radyes">Yes</label>

  <!-- Display this if user answers YES -->
  <p id="layer-one-yes">Unfortunately, you cannot get access to desired files!</p>
 </div>

I hope you get the idea. But I have quite a few such functions on my website. I wanted to know if this is a correct way of doing it. Or is there a more efficient and right way of doing it?

Upvotes: 2

Views: 1779

Answers (2)

Ubaid
Ubaid

Reputation: 441

I would create a function that accepts target element id and current user response. The function will check the condition and display or hide target element. If you want to persist your user responses you can save each in an array or object.

UPDATE

function checkAndShowNext(val, target) {
  var text = document.getElementById(target);

  // Display target question

  // Deny access

}

<form name="myForm">
    <input type="radio" name="myRadios"  value="1" onclick="checkAndShowNext(this.value, 'nextQuestionId')" />
    <input type="radio" name="myRadios"  value="0" onclick="checkAndShowNext(this.value, 'nextQuestionId')" />
</form>

Upvotes: 1

CodeSpent
CodeSpent

Reputation: 1914

Basing off your method currently, just repeat this but for a Div containing your next question. As per efficiency, there are obviously many other ways you could do this too, but its up to interpretation and experience really. If you're most comfortable with this technique for now, finish it, and then try some other techniques as well and just get a feel for it.

You could create individual functions that will progress the user based on their response as well, and rather than "injecting" to the display property, you could create 2 classes appropriately titled hide and show and based on the response replace the class of the appropriate container. This is how I typically get these results myself, but its all preference.

Here's the CodePen: https://codepen.io/codespent/pen/bKXdGb

function layerOne() {
  var radioNo = document.getElementById("radno");
  var radioYes = document.getElementById("radyes");
  var text = document.getElementById("layer-one-yes");
  var element = document.getElementById("layer-two");

  // Display 2nd question
  if (radioNo.checked == true) {
    radioYes.disabled = true;
    element.style.display = "block";
  }
  // Deny access
  if (radioYes.checked == true) {
    radioNo.disabled = true;
    text.style.display = "block";
  }
}
#layer-one-yes {
  display: none;
}

#layer-two {
  display: none;
}

.show {
  display: block;
}
<!-- First question -->
<div id="layer-one">
  <p>Are you under 18?</p>
  <input type="radio" id="radno" onclick="layerOne()"><label for="radno">No</label>

  <input type="radio" id="radyes" onclick="layerOne()"><label for="radyes">Yes</label>

  <!-- Display this if user answers YES -->
  <p id="layer-one-yes">Unfortunately, you cannot get access to desired files!</p>
</div>

<div id="layer-two">
  <p>Are you under 21?</p>
  <input type="radio" id="radno" onclick="layerOne()"><label for="radno">No</label>

  <input type="radio" id="radyes" onclick="layerOne()"><label for="radyes">Yes</label>
</div>

Upvotes: 1

Related Questions