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

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

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

前端HTML：

         

               
          



           

                 使用系统例句
            
            

                  开始分词
            

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的区别