javascript: check if element can accept a value

Question

I am trying to do something like this (pseudo-code):

if ( element can accept a value )
    element.value = "my new value";
else
    element.innerHTML = "my new value";

So for input, textarea, etc it will set the value, but for div or span it will set the innerHTML.

Or should I simply set both value and innerHTML, since innerHTML is harmless to set for input elements?

Why do you need to do this? Why don't you know whether the element is an input or a content element? — Barmar
– Barmar, Commented Aug 9, 2017 at 13:37
I don't think there is a clean way to do that but you could try something like that : if (element.tagName == 'input' || element.tagName == 'testarea' || ...) — Alexandre Thyvador
– Alexandre Thyvador, Commented Aug 9, 2017 at 13:41
@Barmar the program that renders the HTML will be either sending an inputarea or static text (div), depending on the user's edit permissions. I'd rather not depend on things like checking for a class name to see if it's one of my input elements — C C
– C C, Commented Aug 9, 2017 at 13:43
You also could use element.nodeName == "INPUT" as explained here. — Kevin
– Kevin, Commented Aug 9, 2017 at 13:43

epascarello · Accepted Answer · 2017-08-09 14:07:49Z

1

Basic in operator should do the trick

function hasValue(elem) {
  return 'value' in elem
}

console.log('input', hasValue(document.querySelector('#t1')))
console.log('div', hasValue( document.querySelector('#t2')))
console.log('select', hasValue(document.createElement('select')))
console.log('textarea', hasValue(document.createElement('textarea')))
console.log('h1', hasValue(document.createElement('h1')))
console.log('span', hasValue(document.createElement('span')))

<input type="text" id="t1" />
<div id="t2"></div>

answered Aug 9, 2017 at 14:07

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ptyskju Over a year ago

Looks great as a very simple way to check if element is input!

Kevin · Accepted Answer · 2017-08-09 13:59:59Z

0

As mentioned in the comments, you can use

if (element.nodeName == "INPUT" || element.nodeName == "TEXTAREA") {}

The "INPUT" and "TEXTAREA" are the tags you're using, so add whichever ones you're trying to detect as you see fit.

Here is a more in-depth explanation of nodeName.

As a side note, you can significantly simplify this to

if (element.nodeName != "DIV") {}

But this can only be done if you are certain that any element that gets passed in will be a type of input or a div.

edited Aug 9, 2017 at 13:59

answered Aug 9, 2017 at 13:53

Kevin

1998 bronze badges

Comments

brk · Accepted Answer · 2017-08-09 14:18:39Z

0

You can use the attributes property to get the tag name

function updateElement(elemId) {
  var attr = document.getElementById(elemId).attributes;

  if (attr[0].ownerElement.tagName === 'INPUT') {
    document.getElementById(elemId).value = 'adding to value'
  } else {
    document.getElementById(elemId).innerHTML = 'added in inner html'
  }

}

updateElement('inputElem')
updateElement('divElem')

<input id='inputElem'>
<div id='divElem'></div>

answered Aug 9, 2017 at 14:18

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

kukkuz · Accepted Answer · 2017-08-09 14:30:52Z

You can use in operator to check if any element has the value attribute - see demo below:

Array.prototype.forEach.call(document.body.children, function(element) {
  if ('value' in element)
    element.value = "form";
  else
    element.innerHTML = "not form";
});

<input/>
<div></div>
<textarea></textarea>
<select>
  <option value="not form">Not form</option>
  <option value="form">Form</option>
</select>

If you are opting for jQuery, there's a simpler option the :input selelctor - see demo below:

$('body').children().each(function() {
  if ($(this).is(':input'))
    $(this).val("form");
  else
    $(this).html("not form");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
<div></div>
<textarea></textarea>
<select>
  <option value="not form">Not form</option>
  <option value="form">Form</option>
</select>

Collectives™ on Stack Overflow

javascript: check if element can accept a value

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related