CODEWITHSUNDEEP
javascripthtml
Patrascu Robert
Patrascu Robert

Reputation: 1

Javascript content change onclick

I am new in Js and I am trying to create a function with 2 buttons. What I want is when a button is clicked, to move to another content, and make the older disappear. 

<h3>Was this article helpful?</h3>

<button onclick="yesFunction()">Yes</button>
<button onclick="noFunction()">No</button>

<h3 id="headline"></h3>
<script>
function yesFunction() {
    document.getElementById("headline").innerHTML = "Thank you for your feedback";
}

function noFunction(){
    document.getElementById("headline").innerHTML = "We are sorry for the inconvenience"
}
</script>

For example, when I click "NO" I want the content to be replaced with this, but remain on the same page: 

  <!-- If no -->
<h4>What went wrong?</h4>
<form>
  <input type="radio" name="options" value="confusing" checked> The information is confusing<br>
  <input type="radio" name="options" value="not working"> The solution doesn`t work<br>
  <input type="radio" name="options" value="incomplete"> The solution is incomplete<br>
  <input type="radio" name="options" value="out of date"> The content is out of date<br>
  <input type="radio" name="options" value="other"> Other(please specify)<br>
  <input type="text" name="optional" placeholder="Optional.." ><br>
</form>
<input type="submit" name="submit" value="Submit">

if "YES" 

<!-- If yes -->
<h4>Could we improve this article?</h4>
<input type="text" name="optional" placeholder="Optional.." ><br>
<input type="submit" name="submit" value="Submit">

and so on.. Please HELP :D

Upvotes: 0

Views: 418

Answers (6)

Raydoan Anik
Raydoan Anik

Reputation: 219

Well First of all add two id in your yes or no block as like as below. and replace the java script snippet in inside your script snippets. Hope it will work. 

function yesFunction() {
  document.getElementById("headline").innerHTML = "Thank you for your feedback";
  document.getElementById("show-in-no").style.display = "none";
  document.getElementById("show-in-yes").style.display = "block";
}

function noFunction() {
  document.getElementById("headline").innerHTML = "We are sorry for the inconvenience";
  document.getElementById("show-in-yes").style.display = "none";
  document.getElementById("show-in-no").style.display = "block";
}
#show-in-yes,
#show-in-no {
  display: none;
}
<h3>Was this article helpful?</h3>

<button onclick="yesFunction()">Yes</button>
<button onclick="noFunction()">No</button>

<h3 id="headline"></h3>

<div id="show-in-no">
  <h4>What went wrong?</h4>
  <form>
    <input type="radio" name="options" value="confusing" checked> The information is confusing<br>
    <input type="radio" name="options" value="not working"> The solution doesn`t work<br>
    <input type="radio" name="options" value="incomplete"> The solution is incomplete<br>
    <input type="radio" name="options" value="out of date"> The content is out of date<br>
    <input type="radio" name="options" value="other"> Other(please specify)<br>
    <input type="text" name="optional" placeholder="Optional.."><br>
  </form>
  <input type="submit" name="submit" value="Submit">
</div>
<!-- If yes -->
<div id="show-in-yes">
  <h4>Could we improve this article?</h4>
  <input type="text" name="optional" placeholder="Optional.."><br>
  <input type="submit" name="submit" value="Submit">
</div>

Upvotes: 0

random programmer on the inter
random programmer on the inter

Reputation: 1

You could have them surrounded by a div and change the visibility of the elements as follows:

    <h3>Was this article helpful?</h3>

    <button onclick="yesFunction()">Yes</button>
    <button onclick="noFunction()">No</button>

    <h3 id="headline"></h3>
    <script>
    function yesFunction() {
        document.getElementById("headline").innerHTML = "Thank you for your feedback";
		document.getElementById("noelement").hidden = true;
		document.getElementById("yeselement").hidden = false;
    }

    function noFunction(){
        document.getElementById("headline").innerHTML = "We are sorry for the inconvenience"
		document.getElementById("yeselement").hidden = true;
		document.getElementById("noelement").hidden = false;
    }
    </script>

    <div id="noelement" hidden>
		<!-- If no -->
		<h4>What went wrong?</h4>
		<form>
			<input type="radio" name="options" value="confusing" checked> The information is confusing<br>
			<input type="radio" name="options" value="not working"> The solution doesn`t work<br>
			<input type="radio" name="options" value="incomplete"> The solution is incomplete<br>
			<input type="radio" name="options" value="out of date"> The content is out of date<br>
			<input type="radio" name="options" value="other"> Other(please specify)<br>
			<input type="text" name="optional" placeholder="Optional.." ><br>
		</form>
		<input type="submit" name="submit" value="Submit">
    </div>
    
    
    <div id="yeselement" hidden>
		<!-- If yes -->
		<h4>Could we improve this article?</h4>
		<input type="text" name="optional" placeholder="Optional.." ><br>
		<input type="submit" name="submit" value="Submit">
    </div>

Upvotes: 0

Mohammed El Banyaoui
Mohammed El Banyaoui

Reputation: 527

You can create two divs one for yes an the second for no, made both of them hidden then enable the div according to the button clicked.

an example is here 

#ifNo,#ifYes
{
  display:none
}
<h3>Was this article helpful?</h3>

<button onclick="yesFunction()">Yes</button>
<button onclick="noFunction()">No</button>

<h3 id="headline"></h3>
<div id="ifNo">
    <!-- If no -->
<h4>What went wrong?</h4>
<form>
  <input type="radio" name="options" value="confusing" checked> The information is confusing<br>
  <input type="radio" name="options" value="not working"> The solution doesn`t work<br>
  <input type="radio" name="options" value="incomplete"> The solution is incomplete<br>
  <input type="radio" name="options" value="out of date"> The content is out of date<br>
  <input type="radio" name="options" value="other"> Other(please specify)<br>
  <input type="text" name="optional" placeholder="Optional.." ><br>
</form>
<input type="submit" name="submit" value="Submit">
</div>
<div id="ifYes">
  <!-- If yes -->
<h4>Could we improve this article?</h4>
<input type="text" name="optional" placeholder="Optional.." ><br>
<input type="submit" name="submit" value="Submit">
</div>
<script>
function yesFunction() {
    document.getElementById("ifYes").style.display = 'block';
    document.getElementById("ifNo").style.display = 'none';

}

function noFunction(){
       document.getElementById("ifYes").style.display = 'none';
    document.getElementById("ifNo").style.display = 'block';
}
</script>

Upvotes: 0

tjadli
tjadli

Reputation: 800

This can be easily done with a little bit of JS and CSS, What you can do is, encapsulate your YES content and NO in div with specifics ids, and in the yesFucntion, you remove the hidden class for the yes div, and same thing for No div

Code

your html could look like this for example:

 <!-- If yes -->
 <div id="yes_section" class="hidden">
   <h4>Could we improve this article?</h4>
   <input type="text" name="optional" placeholder="Optional.." ><br>
   <input type="submit" name="submit" value="Submit">
 </div>

And your JS :

function yesFunction() {
  document.getElementById("headline").innerHTML = "Thank you for your feedback";

  var d = document.getElementById("yes_section");
  d.className = d.className.replace('hidden','');
}

And for the CSS :

you could just do something like

.hidden {
   display: none;
}

Upvotes: 0

moon
moon

Reputation: 670

Try:

var form1 = document.getElementById("form1");
var form2 = document.getElementById("form2");

form1.addEventListener('click', noFunction);
form2.addEventListener('click', yesFunction);

function yesFunction(e) {
    e.preventDefault();
    document.getElementById("headline").innerHTML = "Thank you for your feedback";
    form1.style.visibility = "visible";
    form2.style.visibility = "hidden";
}

function noFunction(e){
    e.preventDefault();
    document.getElementById("headline").innerHTML = "We are sorry for the inconvenience";
    form1.style.visibility = "hidden";
    form2.style.visibility = "visible";
}
<h2 id="headline"></h2>

<!-- If no -->
<form id="form1">
  <h4>What went wrong?</h4>
  <input type="radio" name="options" value="confusing" checked> The information is confusing<br>
  <input type="radio" name="options" value="not working"> The solution doesn`t work<br>
  <input type="radio" name="options" value="incomplete"> The solution is incomplete<br>
  <input type="radio" name="options" value="out of date"> The content is out of date<br>
  <input type="radio" name="options" value="other"> Other(please specify)<br>
  <input type="text" name="optional" placeholder="Optional.." ><br>
  <input type="submit" name="submit" value="Submit">
</form>

<!-- If yes -->
<form id="form2">
  <h4>Could we improve this article?</h4>
  <input type="text" name="optional" placeholder="Optional.." ><br>
  <input type="submit" name="submit" value="Submit">
</form>

If you don't want the invisible DOM to be remained on the page, try
form1.style.display = 'none'

Upvotes: 0

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

This must give you a rough idea; All it takes is smart use of the css i.e display:none;

document.getElementById("but1").onclick = showYes;
document.getElementById("but2").onclick = showNo;

function showYes() {
   document.getElementById("type2").classList -= " hide"
   document.getElementById("type3").classList += " hide"
}

function showNo() {
   document.getElementById("type3").classList -= " hide"
   document.getElementById("type2").classList += " hide"
}
.hide {
  display:none;
}
<button id="but1">
Yes
</button>
<button id="but2">
No
</button>
<div id="type1">
content 1 .. appears by default
</div>
<div id="type2" class="hide">
content 2 .. Appears when Yes is Clicked
</div>
<div id="type3" class="hide">
content 3 .. Appears when No is Clicked
</div>

Upvotes: 2

Related Questions