CODEWITHSUNDEEP
javascriptformsinnerhtml
lnt
lnt

Reputation: 13

Using innerHTML to change div value based on checkbox

I'm trying to change the text in a div based on whether or not a checkbox has been checked. I'm new to Javascript, so this is what I've attempted... if anyone can point me to where I've gone off the rails, I'd appreciate it.

function SetContent() {
  if (document.complianceformAA.compliance_AA.checked == true) {
    document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
  } else {
    document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
  }
}
<div id="Concerns">
  <form id="complianceformAA">
    <input type="checkbox" id="compliance_AA">
    <label for="compliance_AA">Compliance Concern?</label>
  </form>
</div>
<button onclick="SetContent ();">Generate Summary</button>
<div id="ComplianceSummary"></div>

Upvotes: 1

Views: 1209

Answers (3)

HelloNewWorld
HelloNewWorld

Reputation: 335

function SetContent(){
   var chk = document.getElementById("compliance_AA");
   var summary = document.getElementById("ComplianceSummary");

   if(chk.checked){
    summary.innerHTML="A compliance concern is found for Key Element I-A."
   }else{
    summary.innerHTML="Key Element I-A is met."
   }
}

Upvotes: 0

Universal Electricity
Universal Electricity

Reputation: 775

First, indent your code:

function setContent() {
  if (document.complianceformAA.compliance_AA.checked == true) {
    document.getElementById('ComplianceSummary').innerHTML="A compliance concern is found for Key Element I-A.";
  } else {
   document.getElementById('ComplianceSummary').innerHTML="Key Element I-A is met.";
  }
}

Second, you don't get elements like that. You get it through one of this methods:

  1. getElementById('id')

This gets the element based on ID. For example, this:

document.getElementById('checkbox');

Would get this:

<input type="checkbox" id="checkbox"></input>
  1. getElementsByTagName();

This gets all elements with the same tag. 

document.getElementsByTagName('button');

could return

HTMLCollection [ <button>, <button>, <button>, <button> ]

with this HTML code:

<div id="buttons">
  <button>
  <button>
  <button>
  <button>
</div>
  1. getElementsByClassName()

This returns all elements with a certain class name. For example:

document.getElementsByClassName('a')

could return

HTMLCollection [ <button.a>, <button.a>, <button.a>, <button.a> ]

With this code

<div id="buttons">
  <button class="a">
  <button class="a">
  <button class="a">
  <button class="a">
</div>
  1. getElementsByName()

This gets all elements with the name specified. For example:

document.getElementsByName('hi');

could return

NodeList [ <button.className> <button.className> ]

with this HTML code:

<div id="buttons">
<button name="hi" class="className">
<button name="hi" class="className">
</div>

So what you want for your javascript is this:

function setContent() {
  checkBox = document.getElementById('compliance_AA');
  if (checkBox.checked) {
    document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
  } else {
    document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
  }
}

Here's an example:

    function setContent() {
      checkBox = document.getElementById('compliance_AA');
      if (checkBox.checked) {
        document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
      } else {
        document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
      }
    }
<div id="Concerns">
  <form id="complianceformAA">
    <input type="checkbox" id="compliance_AA">
    <label for="compliance_AA">Compliance Concern?</label>
  </form>
</div>
<button onclick="setContent();">Generate Summary</button>
<div id="ComplianceSummary"></div>

Upvotes: 1

user4639281
user4639281

Reputation:

You should not use named elements, instead select by the id using Document.getElementById()

function SetContent() {
  if (document.getElementById('compliance_AA').checked) {
    document.getElementById('ComplianceSummary').innerHTML = "A compliance concern is found for Key Element I-A.";
  } else {
    document.getElementById('ComplianceSummary').innerHTML = "Key Element I-A is met.";
  }
}
<div id="Concerns">
  <form id="complianceformAA">
    <input type="checkbox" id="compliance_AA">
    <label for="compliance_AA">Compliance Concern?</label>
  </form>
</div>
<button onclick="SetContent ();">Generate Summary</button>
<div id="ComplianceSummary"></div>

Upvotes: 1

Related Questions