上周的任务项目中有一个小需求,在后端接收到数据后需要将进行可视化显示后,需要对显示的数据进行一个人性化的操作:点击句子自动跳转。本想着这个需求分分钟可以搞定,然而还是踩了一会的坑。
如点击“标注例句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的区别