Adding a class attribute in a condition with javascript

Question

I'm trying to write a script to add a class attribute to an element only if another element contains a certain attribute. This is the HTML source code:

      <fieldset class="step1 option0">
                <legend><b>Options</b></legend>
                <p>
                    <input id="question_1" name="group_1" type="radio" MadCap:conditions="guideConditions.ProductA" />
                    <label for="question_1" MadCap:conditions="guideConditions.ProductA">Option 1</label>
                </p>
                <p>
                    <input id="question_2" name="group_1" type="radio" />
                    <label for="question_2">Option 2</label>
                </p>
      </fieldset>
      <fieldset id="question_1_1" class="hide step2 option1" MadCap:conditions="guideConditions.ProductA">
                <legend><b>Outcome:</b>
                </legend>
                <p>This should be only displayed for product A</p>
            </fieldset>
            <fieldset id="question_1_2" class="hide step2">
                <legend><b>Outcome:</b>
                </legend>
                <p>I want to add an "option1" class if the element with id="question_1" contains the property "MadCap:conditions". If the property is not present, "option2" should be added</p>
            </fieldset>

I want the script to add an "option1" class to the fieldset with id "question_1_2" if the input element with id "question_1" contains the attribute "MadCap:conditions". Otherwise, the script should add an "option2" class (fieldset class="hide step2 option1" id="question_1_2" versus fieldset class="hide step2 option2" id="question_1_2")

This is what I've tried, but it does not seem to work:

<script type="text/javascript">
/*<![CDATA[/>
    var element =  document.getElementById("question_1"), 
    var element2 = document.getElementById("question_1_2"), 
    if (element.hasAttribute('MadCap:conditions')) { // "generate the class dynamically" 
        element2.classList.add("option1")
    } else { // "increment it by one" 
        element2.classList.add("option2")
    } 
/]]>*/
</script>

Any ideas on how to fix this? Thank you!

Are you sure your `script` is place *below* the content it is referring to? If not, those elements are not yet in the DOM and the script will not find them. — trincot, Aug 14 '20 at 07:26
Thank you @trincot. I've placed the script right after the form containing the fielsets in the body element of my html...Is the script I wrote correctly formatted? I've added it like this: — marinahgtech, Aug 14 '20 at 07:53
You should include it in your question, exactly like you have it. But it looks like you put all the code in a big comment block... NB: a comma is not a statement separator. — trincot, Aug 14 '20 at 08:25

score 0 · Answer 1 · answered Aug 14 '20 at 07:56

With comma you got Uncaught SyntaxError: Unexpected token 'var' so if you put semicolon it seems to work:

  var element = document.getElementById("question_1");
  var element2 = document.getElementById("question_1_2");
  if (element.hasAttribute('MadCap:conditions')) {
    element2.classList.add("option1")}
  else {
    element2.classList.add("option2")}

score 0 · Accepted Answer · answered Aug 14 '20 at 08:39

Your script element uses CDATA in a wrong way:

<script type="text/javascript">
/*<![CDATA[/>
    var element =  document.getElementById("question_1"), 
    var element2 = document.getElementById("question_1_2"), 
    if (element.hasAttribute('MadCap:conditions')) { // "generate the class dynamically" 
        element2.classList.add("option1")
    } else { // "increment it by one" 
        element2.classList.add("option2")
    } 
/]]>*/
</script>

Even the syntax highlighting on this site already hints that something is wrong. The /* */ wraps around all of your code, so it is not parsed as code.

Nowadays there is seldom a reason to apply this CDATA pattern. See When is a CDATA section necessary within a script tag?.

Also, you should use semicolons to separate statements, not commas.

If you really need the CDATA to be there, then only put the CDATA parts inside JavaScript comments. For instance like this:

<script type="text/javascript">
// <![CDATA[/>
    var element =  document.getElementById("question_1");
    var element2 = document.getElementById("question_1_2"); 
    if (element.hasAttribute('MadCap:conditions')) { // "generate the class dynamically" 
        element2.classList.add("option1");
    } else { // "increment it by one" 
        element2.classList.add("option2");
    } 
// ]]>
</script>

Adding a class attribute in a condition with javascript

2 Answers2