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>

在控制台中我有“Uncaught TypeError：无法设置属性'innerHTML'为null”并且在页面上只有网格中的第一个单元格填入了错误的值（相等 - 当它应该更小时）在发布之前，我在互联网上阅读了相同的问题，但我真的不知道我做错了什么......

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

错误“Uncaught TypeError：无法设置null的属性'innerHTML'”，即使脚本部分在末尾也是如此

1 个答案: