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