adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

Html element is always null

I am using creating custom html from a list service. When trying to add the data to a div inner html I receive an error that says cannot read property of null.

This is what is in HTML component. I have a service that pass data to two functions inside the HTML component.

What am I doing wrong??
<!--

<div id="riceContainer" class="content"
<div id="riceLeft" class="leftColumn" <
<div id="riceRight" class="rightColumn" <
<

<script type="text/javascript"
function leftColumn(data){
console.log("Left: "+data.Name);

Code: Select all

     var el = document.getElementById("riceLeft"); 
     console.log(el); 
     el.innerHTML += '<div class="card"'; 
      el.innerHTML += '<div class="card-image"'; 
       el.innerHTML += '<h2'+data.Name+'</h2'; 
       el.innerHTML += '<p'; 
        el.innerHTML += data.Description; 
       el.innerHTML += '</p'; 
      el.innerHTML += '<'; 
     el.innerHTML += '<'; 
 } 

 function rightColumn(data){ 
     console.log("Right: "+data.Name); 
     var el = document.getElementById("riceRight"); 
     el.innerHTML += '<div class="card"'; 
      el.innerHTML += '<div class="card-image"'; 
       el.innerHTML += '<h2'+data.Name+'</h2'; 
       el.innerHTML += '<p'; 
        el.innerHTML += data.Description; 
       el.innerHTML += '</p'; 
      el.innerHTML += '<'; 
     el.innerHTML += '<'; 
 } 

</script

--

Egor Kotov6832188
Posts: 0
Joined: Wed Nov 19, 2014 5:15 pm

Html element is always null

Hello Adam,

1) manipulating with DOM page is not a good idea
2) you will not be able to map anything to this html
3) inserting one by one will lead to:
a) performance decrease
b) opening tag will be invalid tag for browser, so it will remove this part of tag from DOM structure

try next:
var insertHTML = ' '+data.Name+' ' + data.Description + '

';

el.innerHTML +=insertHTML

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

Html element is always null

I'm sorry I do not understand your example. Can you please go into detail?

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

Html element is always null

I'm sorry I do not understand your example. Can you please go into detail?

Egor Kotov6832188
Posts: 0
Joined: Wed Nov 19, 2014 5:15 pm

Html element is always null

Adam,

Sorry, without code tag all html was removed
code
;
var insertHTML = '<div class="card"><div class="card-image"><h2>'+data&#46;Name+'</h2><p>' + data&#46;Description + </p><><>';
/code

now you can use insertHTML:

el.innerHTML +=insertHTML

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

Html element is always null

That didn't work either. I found another way.

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Html element is always null

Hi Adam - Thanks for the update.

Return to “Issues”