Greasemonkeyでハマったメモ 変数名の取り扱いに注意する

greasemonkeyのスクリプト修正中にハマる

よくわかってないものをよくわからないまま使ってるので結構ハマっちゃいます
ちなみに、tampermonkey(chrome)で確認してます

ソース

//こんな感じのスクリプトで発生
window.onload = () => {
  createTextArea()
  createButton()
}

createButton = () => {
  var applyBttuon = document.createElement("button")
  applyBttuon.innerHTML = "変更"
  applyBttuon.onclick = function () {
    console.log(input1) //←ココ！
    /*
      input1.valueの変更処理(省略)
    */
  };
  //作成した要素をページに追加
  var mainContainer= document.querySelector("body")
  mainContainer.prepend(applybutton)
}
createTextArea = () => {
  var input1 = document.createElement("textarea") //←ココ！
  input1.id = "input1" //←ココ！
  input1.value = "initial"
  //作成した要素をページに追加
  var mainContainer = document.querySelector("body")
  mainContainer.prepend(input1)
}

/*
 ボタンを押したときの表示 → initial
*/

新たにわかったこと

指定した変数が宣言されてなく、かつ同名のidのエレメントがある場合、エレメントにアクセス出来る

ハマり内容

applyButton.onclickでglobal変数のinput1に触ったつもりが、input1はglobalではなく、不幸にも(?) id=input1のエレメントがあったためにエレメントのほうにアクセス出来てしまった
更に不幸なことに元々input1をグローバルのつもりで扱っていた関数ではinput1.valueの変更しかしてなかったので見かけ上期待通りに動いていてそのまま通してしまっていた
時を経て、今回id名を変更する形で修正をかけたため、関係ないところでinput1にアクセス出来なくなって、その修正に時間がかかった

感想

idにはハイフンがつくこともあるし、id名そのままでアクセス出来ても使わない気がします
ハイフンがついててもアクセスする方法があるんだろうか