Changing Content on Button Click in JavaScript

Other Questions JavaScript
1

I’m a beginner in JavaScript and I’m working on a function that incorporates two buttons. My goal is for one button to present a new piece of content while hiding the previous one when clicked. Here’s a simplified example:

<h3>Was this information useful?</h3>

<button onclick="agreeFunction()">Agree</button>
<button onclick="disagreeFunction()">Disagree</button>

<h3 id="response"></h3>
<script>
function agreeFunction() {
    document.getElementById("response").innerHTML = "Thanks for your input!";
}

function disagreeFunction() {
    document.getElementById("response").innerHTML = "We appreciate your feedback!";
}
</script>

I want to display different content based on the button clicked. For instance, clicking “Disagree” should display this:

<!-- If disagree -->
<h4>What was the issue?</h4>
<form>
  <input type="radio" name="problem" value="confusing" checked> The content was confusing<br>
  <input type="radio" name="problem" value="not working"> The solution didn’t work<br>
  <input type="radio" name="problem" value="incomplete"> The information was incomplete<br>
  <input type="radio" name="problem" value="outdated"> The content is outdated<br>
  <input type="radio" name="problem" value="other"> Other (please describe)<br>
  <input type="text" name="additionalInfo" placeholder="Optional..." ><br>
</form>
<input type="submit" name="submitFeedback" value="Submit">

If the user clicks “Agree,” it should show:

<!-- If agree -->
<h4>How can we enhance this article?</h4>
<input type="text" name="suggestions" placeholder="Optional..." ><br>
<input type="submit" name="submitFeedback" value="Submit">

Any help with this would be greatly appreciated! :smiley:

2

To achieve the functionality you’re looking for, you can dynamically display additional HTML content using JavaScript. You might want to create the feedback forms as hidden HTML initially and then show or hide them using JavaScript based on button clicks. Wrap each form in a div and set its display to ‘none’. On clicking the respective button, change the style of the div to ‘block’. Here’s a quick example:

<div id="agreeContent" style="display:none">
  <h4>How can we enhance this article?</h4>
  <input type="text" name="suggestions" placeholder="Optional..."><br>
  <input type="submit" name="submitFeedback" value="Submit">
</div>

<div id="disagreeContent" style="display:none">
  <h4>What was the issue?</h4>
  <form>
    <input type="radio" name="problem" value="confusing" checked> The content was confusing<br>
    <input type="radio" name="problem" value="not working"> The solution didn’t work<br>
    <input type="radio" name="problem" value="incomplete"> The information was incomplete<br>
    <input type="radio" name="problem" value="outdated"> The content is outdated<br>
    <input type="radio" name="problem" value="other"> Other (please describe)<br>
    <input type="text" name="additionalInfo" placeholder="Optional..."><br>
  </form>
  <input type="submit" name="submitFeedback" value="Submit">
</div>

Your JavaScript could then be modified to show these forms like so:

function agreeFunction() {
  document.getElementById("response").innerHTML = "Thanks for your input!";
  document.getElementById("agreeContent").style.display = "block";
  document.getElementById("disagreeContent").style.display = "none";
}

function disagreeFunction() {
  document.getElementById("response").innerHTML = "We appreciate your feedback!";
  document.getElementById("disagreeContent").style.display = "block";
  document.getElementById("agreeContent").style.display = "none";
}

This approach should meeet your needs effectively and keeps the HTML structured and organized.

3

Another approach to handle this could be utilizing the ‘innerHTML’ property to replace the entire section dynamically when a button is clicked. In your JavaScript functions, instead of changing the ‘display’ property of hidden elements, you can modify the content of an existing container like a ‘div’ to have the new HTML form inside. This approach provides flexibility for handling dynamic content changes without needing initial hidden HTML setup. It’s especially efficient for simpler page structures where content updates don’t require extensive styling adjustments or separate container elements.

4

Hey Dave! You might also consider using ‘querySelector’ to target elements and change their display using CSS classes. Add a class to show/hide forms and toggle these classes in your JS functions. It’s a clean way to manage visible state without cluttering style attributes. Good luck!