错误"Uncaught TypeError: Cannot set property 'innerHTML' of null"即使脚本部分位于末尾

Question

我试图根据2个值比较在DIV不同文本中显示：

 <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>

在控制台中，我有" unduard typeError：无法设置null的属性'innerhtml'，并且在页面上仅在网格中获得第一个单元格中的第一个单元格被错误的值填充（等于相等 - 何时应该较小时）在此处发布之前，我在互联网上阅读了同样的问题，但我真的不知道我做错了什么...

Answer 1

您实际上根本不需要对任何元素的引用，因为数据绑定提供了您寻求的效果。您可以简单地从changeimg()绑定中返回所需的文本：

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

对于以下模板。changeimg()的返回值显示为<div>的文本内容：

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

demo