0
function normToggle(){
document.getElementById('normToggle').onclick = function(){
    if(document.getElementById('normToggle').checked){
    document.getElementsByTagName('add').style.verticalAlign= 'baseline';
    }else{
        document.getElementsByTagName('add').style.verticalAlign= 'super';
    }
};
document.getElementsByTagName('add').style.verticalAlign= 'super';
document.getElementById('normToggle').checked = false;
}

So I try to use a checkbox to change the style of the 'add' tags. Their vertical align are super first, then i wnat them to change normal, but they didnt respond. Another javascript from the smae file working just fine.

Cœur
  • 37,241
  • 25
  • 195
  • 267
FPeter
  • 43
  • 2
  • 9

1 Answers1

0

getElementsByTagName returns a HTML Collection - you'll need to iterate through the collection to change the style of each element in the collection

something like this:

function normToggle() {
    var setAlign = function (align) {
        [].forEach.call(document.getElementsByTagName('add'), function(tag) {
            tag.style.verticalAlign = align;
        });
    }
    document.getElementById('normToggle').addEventListener('click', function() {
        setAlign(this.checked ? 'baseline' : 'super');
    });
    setAlign('super');
    document.getElementById('normToggle').checked = false;
}

Looking at the code now, you're unlikely to have elements called <add> !!! Is that some sort of mistake in your HTML?

Jaromanda X
  • 53,868
  • 5
  • 73
  • 87
  • I utilize an xsl to transform a xml file to xhmtl. The XML contain the tag, – FPeter Nov 15 '15 at 11:19
  • Although your code seems to be fine, something is still of. Since I use a boilerplate, I study the source code, maybe I missed something. – FPeter Nov 15 '15 at 12:03