Javascript innerHTML中的我的函数不工作，比如当我单击按钮时，函数未定义

你好，有人能帮我吗？谢谢，我不知道怎么了

var state=false；
函数myFunction（）{
var x=document.getElementById（“按钮”）；
状态=！状态；
如果（州）{
x、 value=“ON”；
}否则{
x、 value=“OFF”；
}
}
const rootApp=document.getElementById（“根”）；
rootApp.innerHTML=''；

var状态=假；
函数myFunction（）{
var x=document.getElementById（“按钮”）；
状态=！状态；
如果（州）{
x、 value=“ON”；
}否则{
x、 value=“OFF”；
}
}
const rootApp=document.getElementById（“根”）；
rootApp.innerHTML=''；

您确定文档中有

#root

元素吗？javascript代码是否位于

头部

或

正文

如果您将您提供的代码复制/粘贴到此页面上的控制台中，并将其目标设置为

document.body

在

rootApp

中，而不是

document.getElementById（“root”）所以我怀疑您的问题是由于外部原因造成的

另外

如果您使用
const
，您应该使用
let
而不是
var
，因为您在顶级作用域中声明
state
，它可以在任何嵌套作用域（您的函数体）中访问


如果您不关心（3），可以通过在
onclick
属性中将
this
传递到
myFunction
来访问按钮，这样做就不需要在
myFunction
内部使用
getElementById
，因为它将作为参数提供


最好自己创建按钮元素，并使用
addEventListener
来添加交互性，而不是使用
innerHTML


另外，可以通过使用
复选框而不是按钮来改进这一点：您不必一直同步选中状态。你总是可以

返工代码

let state=false；
函数myFunction（{target}）{
状态=！状态；
target.value=状态为“开”：“关”；
}
//让我们尝试获取#根元素
const rootId='root'；
让rootApp=document.getElementById（rootId）；
//如果没有#根元素，我们可以创建一个
如果（！rootApp）{
rootApp=document.createElement（'div'）；
rootApp.id=rootId；
document.body.appendChild（rootApp）；
}
//创建按钮元素并设置其属性
常量元素=document.createElement（'input'）；
element.type='button'；
element.id='button'；
//确保'value'与'state'同步`
element.value=状态？'“开”：“关”；
//收听点击事件
元素。addEventListener（'click'，myFunction）；
//附加到#根
rootApp.appendChild（元素）；

您好，先生，它不是嵌入在.html文件中，而是嵌入在.js文件中，您发现了吗？如果你不想让我知道你被困在哪里，你可以在这里查看它仍然不起作用我不知道为什么：（你的代码都被注释掉了，删除每行开头的
/
。）看看我的答案，然后使用我给出的代码，它会工作的是的，如果我将它包含在一个.html文件中，它会工作的，但我正在.js文件中构建它谢谢你，先生，明白了，它终于工作了，不客气！别忘了投票并接受答案：）