Js(四)：input文本框 innerHtml 或 innerText 赋值不生效问题

上周的任务项目中有一个小需求，在后端接收到数据后需要将进行可视化显示后，需要对显示的数据进行一个人性化的操作：点击句子自动跳转。本想着这个需求分分钟可以搞定，然而还是踩了一会的坑。

如点击“标注例句1”后，自动进行关闭当前模态框，然后将参数数据传递至如下的文本框。

前端HTML：

<div class="row">
         <div class="col-xs-12">
               <input type="text" placeholder="请在此输入一条例句，并点击开始分词进行分词"  class="col-xs-10" id="SampleSentence">
          </div>
</div>

<div class="row">
           <div class="col-xs-6">
                 <a class="button button-glow button-rounded button-royal"  data-toggle="modal" onclick="getRandomSentenceFrameList()"  style="width:178px;margin:5px;height:41px;">使用系统例句</a>
            </div>
            <div class="col-xs-6">
                  <button style="width:178px;margin:5px;height:41px;"  class="button button-glow button-rounded button-highlight"  id="btnSepSet" onclick="SeparationSentence()">开始分词</button>
            </div>
</div>

JS代码：

document.getElementById("SampleSentence").innerHTML = sentence;

Problem：

本来计划采用innerHTML+input文本框赋值，轻轻松松可以搞定，但赋值后却不生效，input框里面不管怎么赋值都是空白的。

而后在控制台发现其实是有数据流动的。

Solution：

采用元素的value+input文本框赋值，解决！

原因是input的赋值与其他标签是不一样的，input赋值是用value赋值的，特别容易和其他标签赋值搞混。所以只需要将innerHTML替换成value就可以。

document.getElementById("SampleSentence").value = sentence;

扩展：

Js(五)：innerHTML与innerText的区别