html/javascript:无法将变量从按钮传递给函数？

<button onclick="myFunction()">点击按钮</button>

<script>
  var myVariable;

  function myFunction() {
    // 在这里访问myVariable变量
    console.log(myVariable);
  }

  // 在按钮点击事件中给myVariable赋值
  myVariable = "Hello World";
</script>

<button onclick="myFunction(this.getAttribute('data-variable'))" data-variable="Hello World">点击按钮</button>

<script>
  function myFunction(variable) {
    // 在这里访问传递的变量
    console.log(variable);
  }
</script>

<button id="myButton">点击按钮</button>

<script>
  (function() {
    var myVariable = "Hello World";

    document.getElementById("myButton").addEventListener("click", function() {
      // 在这里访问myVariable变量
      console.log(myVariable);
    });
  })();
</script>