How to tell whether my element needs innerHTML or value

Question

I am using JavaScript to run some AB tests on my site. I am able to change the text in my <button>'s with element.innerHTML = "Text that I want" but using that same strategy I cannot change the text in <input type="submit">'s.

Inversely, I can change the value of submit buttons using element.value = "Text that I want", but cannot change a <button>'s text in that way.

So my question is, how can I know which function needs to be used on a specific element so that I can create an algorithm that handles every type of element?

In short: How do I know whether to use element.innerHTML or element.value programmatically?

NOTE: jQuery is not allowed.

Example - Here is some code that takes a class name as input and changes the element throughout the page. Sometimes an <input> may have the identifying class, but sometimes it may be a <div>, <button> or <p>.

var execute = function(experimentName, variation){
        var elements = document.getElementsByClassName(experimentName);
        for (var j = 0; j < elements.length; j++) {
            if (typeof(variation) == "function")
            {
                variation.call(elements[j]);
            }
            else
            {
                elements[j].value = variation;
                //elements[j].innerHTML = variation;
            }
        }
    };

score 4 · Accepted Answer · answered Feb 08 '15 at 18:41

4

If you are trying to do it in a generic way you could make an instanceof check against the input element's interface class:

if( element instanceof HTMLInputElement ){
    element.value = "foo";
} else {
    element.innerHTML = "foo";
}

answered Feb 08 '15 at 18:41

Emissary

9,954
8
54
65

Great approach.You took it to next level. – roshan Feb 08 '15 at 19:01

score 2 · Answer 2 · answered Feb 08 '15 at 18:31

2

The same way you know how to use that element in HTML in the first place.

innerHTML sets the element's contents; value sets the element's value="" attribute.

answered Feb 08 '15 at 18:31

SLaks

868,454
176
1,908
1,964

How can I change the `value` of a `submit` and the `innerHTML` of a `button` with the same code? – Trevor Hutto Feb 08 '15 at 18:34
There are only a few elements that use `value`, so you can just make a list and have an exception for them. – MightyPork Feb 08 '15 at 18:38
@MightyPork fair enough, I thought there may have been a more elegant way. – Trevor Hutto Feb 08 '15 at 18:40

How to tell whether my element needs innerHTML or value

2 Answers2