Erreur « Uncaught TypeError: peut-il bien non défini « innerHTML » null » même si une partie du script est à la fin

Question

Je suis en train d'afficher dans un div texte différent basé sur 2 valeurs comparaison:

<dom-module id="my-view1" theme-for="vaadin-grid"> 
<template is="dom-bind" id="transparent-template"> 

<iron-ajax auto url="http://localhost:8808/datal4/" handle-as="json" last-response="{{top}}"></iron-ajax> 


    <vaadin-grid id="transparent-header" items="[[top.top]]" size="10" > 
    <vaadin-grid-column width="50px" flex-grow="0"> 
    <template class="header">#</template> 
    <template><div>{{displayIndex(index)}}</div></template> 
    </vaadin-grid-column> 
     <vaadin-grid-column resizable> 
     <template class="header">Evolution</template> 
     <template><div id="div_id">{{changeimg(item.score, item.oldscore)}}</div></template> 

     </vaadin-grid-column> 

    </vaadin-grid> 
    </template> 
    </body> 
    <script> 

Polymer({ 
    is: 'my-view1', 
     changeimg: function(score, oldscore) { 

     var imagid = document.getElementById('div_id'); 

     if(score>oldscore){imagid.innerHTML = "bigger";} 
     else if(score<oldscore){imagid.innerHTML ="smaller";} 
     else {imagid.innerHTML = "equal";} 

    } </script> 

Dans la console j'ai "Uncaught TypeError: Impossible de définir la propriété 'innerHTML' de null" et sur la page seule la première cellule de la grille est remplie avec la mauvaise valeur (égale - quand elle devrait être plus petite) à propos de mêmes questions partout sur internet avant de poster ici mais je ne sais vraiment pas ce que j'ai fait de mal ...

Answer 1

Vous n'avez en fait besoin d'aucune référence à un élément, car la liaison de données fournit l'effet recherché. Vous pouvez simplement renvoyer le texte souhaité dans la changeimg() reliure:

changeimg: function(score, oldscore) { 
    if (score > oldscore) { 
    return "bigger"; 
    } else if (score < oldscore) { 
    return "smaller"; 
    } else { 
    return "equal"; 
    } 
} 

Pour le modèle suivant. la valeur de retour de changeimg() apparaît comme le contenu du texte du <div>:

<div>{{changeimg(item.score, item.oldscore}}</div> 

demo