Используем innerHTML, чтобы изменить значение элемента div, основанные на флажок

Я пытаюсь изменить текст в div, основываясь на том, был ли установлен флажок. Я новичок в Javascript, так что это то, что я пытался... если кто-нибудь укажет мне, где я сошел с рельсов, я буду признателен.

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>
3 2
javascript forms innerhtml

3 ответа:

Вы не должны использовать именованные элементы , вместо этого выберите id с помощью 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>
1

Во-первых, сделайте отступ в коде: 

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.";
  }
}
Во-вторых, вы не получаете таких элементов. Вы получите его с помощью одного из следующих методов:
  1. getElementById('id')

Это возвращает элемент на основе ID. Например, это: 

document.getElementById('checkbox');

Получилось бы так: 

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

Это возвращает все элементы с одинаковым тегом. 

document.getElementsByTagName('button');

Может вернуться 

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

С этим HTML код: 

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

Возвращает все элементы с определенным именем класса. Например: 

document.getElementsByClassName('a')

Может вернуться 

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

С этим кодом 

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

Это возвращает все элементы с указанным именем. Например: 

document.getElementsByName('hi');

Может вернуться 

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

С этим HTML кодом: 

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

Итак, что вы хотите для вашего javascript это: 

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

Вот пример: 

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