Using innerHTML to change div value based on checkbox

Question

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>

score 1 · Accepted Answer · edited May 23 '17 at 11:52

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>

score 1 · Answer 2 · answered Aug 15 '15 at 02:44

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:

getElementById('id')

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

document.getElementById('checkbox');

Would get this:

<input type="checkbox" id="checkbox"></input>

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>

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>

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>

score 0 · Answer 3 · answered Aug 15 '15 at 02:59

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."
   }
}

Using innerHTML to change div value based on checkbox

3 Answers3