关于引入js文件后里面函数is not defined的问题解决

这个是一个设定，在js里面写入innerHTML即用js写html页面，以便于封装，像这样

 function asd() {
  var div = document.createElement("div");
  div.id = "location";
  div.innerHTML =
    '<div id="left-top-modal">\n' +
    ' <button onclick="change()" id="changeGraphics">按钮</button>\n' +
    '</div>';
  document.body.appendChild(div);
}
function change() {
  console.log("1231231231");
}
 export  {asd}

然后在.vue里面引用

<script>
  import {asd} from "../ad/ad";
    export default {
        name: "Index",
      data () {
        return {}
      },
      mounted(){
          asd();
      }
    }
    </script>

再页面上按钮是会显示出来的，但是里面的点击事件并不会执行，会显示change is not defined

然后经过多方大佬帮助，找到了解决方法

先看解决方法

window.change = function () {
  console.log("1231231231");
}

主要是因为作用域的问题，这个change方法在js里面，onclick事件找方法会在window下面找，当然是找不到的。

然后这样看着是不是很抽象

 function asd() {
  var div = document.createElement("div");
  div.id = "location";
  div.innerHTML =
    '<div id="left-top-modal">\n' +
    ' <button  id="changeGraphics">绘制</button>\n' +
    '</div>';
  document.body.appendChild(div);
    document.getElementById("changeGraphics").addEventListener("click", function(){
      console.log("1231231231");
  })
}
 export  {asd}

这样改一下，用addEventListener事件而不是onclick事件，再把函数体放在asd函数里包着，同样可以完美的解决问题。