在javascript中插入长html代码，但onclick不起作用

Posted 2023-05-07

【中文标题】在javascript中插入长html代码，但onclick不起作用

【英文标题】：Insert long html code in javascript, but onclick doesn't works

【发布时间】：2022-01-13 20:25:10

【问题描述】：

我正在使用innerhtml 将长html 代码插入javascript。

这是一个与我的例子类似的例子：

    let result = document.getElementById('result')
    function display()
        result.innerHTML += '<input id="searchterm" type="text" /> <input id="search" type="button" value="Search" onclick="searchdata()"></input>'
        function searchdata()
            console.log('it works')
        
    

<button onclick='display()'>Display</button>
<div id=result></div>

问题是当我运行单击search button 时，它将显示Uncaught ReferenceError: searchdata is not defined。

我知道如果我在声明 innerHTML 之前声明 function，这绝对有效。

但是，我只是想知道为什么会这样？

另外，有人可以为我提供一个更好的方法来在javascript 中插入html，因为我想在javascript 中插入整个form（这比我在示例中显示的要多得多）并使用innerHTML，后期改bug很难吗？

感谢您的回复！

更新：我知道如何解决问题，但我只是在寻找原因和在javascript 中插入html 的高级方法

【问题讨论】：

您需要将searchdata 函数移到全局范围之外，而不是在display 内

你为什么说“问题是当我运行时点击搜索按钮，它会显示 Uncaught ReferenceError: searchdata is not defined” 然后说“我知道如何解决这个问题，但我只是寻找在 javascript 中插入 html 的原因和高级方法”？你告诉我们两个不同的问题，第四个，问题是什么？

@ParkingMaster，我的意思是我只是想知道为什么会显示此错误并且想知道是否有解决它的高级方法？

@Yusuf 我编辑了 NiyaziBabayev 的答案并提供了有关该主题的信息。

@ParkingMaster 首先感谢您的帮助，但您确定要编辑答案吗？我没有看到任何修改？

【参考方案1】：

尝试将“searchdata()”函数移出本地范围并在“display()”函数中调用它。看看是不是这样。

let result = document.getElementById('result')

function searchdata() 
  console.log('it works')


function display() 
  result.innerHTML += '<input id="searchterm" type="text" /> <input id="search" type="button" value="Search" onclick="searchdata()"></input>'
  searchdata();