javascript - Hide textbox based on its value -

i've got canvas on can add text , image layers, below canvas have couple of textboxes in display information selected layer. things display are:

• x coördinate
• y coördinate
• width
• height
• font
• font size
• font color
• titel
• angle

now since image layer not have font, font size , font color display 'undefined' now.

i using javascript code display info in textboxes:

document.getelementbyid('width').value = math.round(layer.width*100)/100; document.getelementbyid('height').value = math.round(layer.height*100)/100; document.getelementbyid('x').value = layer.offsetx; document.getelementbyid('y').value = layer.offsety; document.getelementbyid('color').value = layer.fontcolor; document.getelementbyid('color').style.color=layer.fontcolor; document.getelementbyid('font').value = layer.fontfamily; document.getelementbyid('size').value = layer.fontsize; document.getelementbyid('title').value = layer.title; document.getelementbyid('angle').value = math.round(layer.angle*100)/100; 

the question:
there way hide textboxes disappear when contain word 'undefined'?
possible hide plain text in front of boxes? (font:, size:, color)

a working version of canvas can found in this codepen!

you can create helper function hides or shows element depending on value === undefined or not:

function setelementvaluebyid(id, value){     var element = document.getelementbyid(id);     if(element != null){         element.style.display = value !== undefined ? '': 'none';         element.value = value;     } }  // usage  setelementvaluebyid('font', layer.fontfamily); 

edit:

to hide label also, can group each box , label inside single element (div):

(based on codepen example)

<td> x: <input id="x" type="number" onkeypress="return isnumber(event)" size="5"> y: <input id="y" type="number" onkeypress="return isnumber(event)" size="5"> 

becomes:

<td>  <div>x:       <input id="x" type="number" onkeypress="return isnumber(event)" size="5">  </div>  <div>y:       <input id="y" type="number" onkeypress="return isnumber(event)" size="5">  </div> 

then modify function show/hide parent div:

// searches element given id , sets value. // if value strictly equal 'undefined', // element's parent hidden. function setelementvaluebyid(id, value){     var element = document.getelementbyid(id);     if(element != null){         element.parentelement.style.display = value !== undefined ? '': 'none';         element.value = value;     } }  // usage  setelementvaluebyid('font', layer.fontfamily);