如何将getElementById获取的值填入input输入框，id匹配仍赋值失败如何解决

• 先确认回调函数是否触发
  在show_smiles函数内添加console.log('触发回调', new_smiles)，打开浏览器控制台看修改结构后是否有对应日志输出。如果没有输出，说明jsmeOnLoad没有正常执行，或者JSME的AfterStructureModified回调绑定失败：
  • 确认JSME库加载完成后才执行jsmeOnLoad，可以把JS代码放在页面body底部，或者监听DOMContentLoaded事件后再初始化JSME
  • 全局变量jsmeApplet建议补全声明，避免作用域冲突，修改为let jsmeApplet;在函数外提前声明
• 确认DOM元素可正常获取
  在document.getElementById("smiles_container").value = new_smiles前加一行日志console.log('获取到的输入框：', document.getElementById("smiles_container"))，如果控制台输出为null，说明页面上不存在对应id的元素，或者代码运行时元素还未渲染：
  • 检查页面是否存在多个id="smiles_container"的元素，id重复会导致获取到错误的元素
  • 确认input标签的位置在JS代码之前，或者把赋值逻辑放在DOM加载完成的回调中
• 特殊内容适配说明
  你当前的正则替换后会生成<em>标签，input输入框的value只支持纯文本，填入后会直接显示<em>字符而不是斜体效果，如果不需要这个标签可以直接替换为$1即可。

// 提前声明全局变量
let jsmeApplet;
// 等待DOM加载完成再初始化
document.addEventListener('DOMContentLoaded', function() {
  // 如果JSME会自动调用jsmeOnLoad可删除本行
  jsmeOnLoad();
})

function jsmeOnLoad() {
  const jsmeContainer = document.getElementById("jsme_container");
  // 判空避免控制台报错
  if(jsmeContainer) {
    jsmeContainer.style.display = "none";
    jsmeApplet = new JSApplet.JSME("jsme_container", "380px", "340px", {
      "options": "oldlook,marker,markAtomOnly,nocanonize"
    });        
    jsmeApplet.setCallBack("AfterStructureModified", show_smiles);
  }
}
                
var patt = /\[([A-Za-z][a-z]?)H?\d*:\d+\]/g;
function show_smiles(event) {
  const smiles = event.src.smiles();
  // 不需要HTML标签就替换为 '$1'，需要保留标签可以改回原写法
  const new_smiles = smiles.replace(patt, '$1');
  const inputEle = document.getElementById("smiles_container");
  // 判空后再赋值
  if(inputEle) {
    inputEle.value = new_smiles;
  }
}

<input type="text" placeholder="Enter the Solute Molecule here" name="solute" id="smiles_container">
<br><br>

内容的提问来源于stack exchange，提问作者harsh。