如何将4个字符串值从HTML页面传递到javascript文件？

<script>
    var str1 = "Value 1";
    var str2 = "Value 2";
    var str3 = "Value 3";
    var str4 = "Value 4";
</script>

console.log(str1); // 输出：Value 1
console.log(str2); // 输出：Value 2
console.log(str3); // 输出：Value 3
console.log(str4); // 输出：Value 4

<div id="myElement" data-str1="Value 1" data-str2="Value 2" data-str3="Value 3" data-str4="Value 4"></div>

var myElement = document.getElementById("myElement");
var str1 = myElement.getAttribute("data-str1");
var str2 = myElement.getAttribute("data-str2");
var str3 = myElement.getAttribute("data-str3");
var str4 = myElement.getAttribute("data-str4");
console.log(str1); // 输出：Value 1
console.log(str2); // 输出：Value 2
console.log(str3); // 输出：Value 3
console.log(str4); // 输出：Value 4

<input type="text" id="input1" value="Value 1">
<input type="text" id="input2" value="Value 2">
<input type="text" id="input3" value="Value 3">
<input type="text" id="input4" value="Value 4">
<button onclick="getValue()">获取值</button>

function getValue() {
    var str1 = document.getElementById("input1").value;
    var str2 = document.getElementById("input2").value;
    var str3 = document.getElementById("input3").value;
    var str4 = document.getElementById("input4").value;
    console.log(str1); // 输出：Value 1
    console.log(str2); // 输出：Value 2
    console.log(str3); // 输出：Value 3
    console.log(str4); // 输出：Value 4
}