如何使用 JavaScript 从用户输入创建变量

Question

我觉得有点傻， 可能有一个真正简单的解决方案 但是我花了好几天还是找不到。

我要做的就是编写一个包含大量 (var a) 的脚本 并且用户在输入中输入一个数字（不是提示）。 然后每个 (var a) 都变成那个数字。

a = (userinput)
b = (userinput)

a+a+a+a = (output)
a+a+a+b = (output)
a+a+b+b = (output)
a+b+b+b = (output)
b+b+b+b = (output)
a*a+b*b =... 
etc...

我完成了以下 Brad Travesty 速成课程： JavaScript、Node.js、AJAX、JSON、Fetch API。我还研究了 localStorage。

请帮忙，过去 2 天 20 小时没有任何进展，我要去一点... ??????????????????

谢谢，
杰克

---（编辑）---
我在想我必须将 (var a) 存储在一个单独的文件中，然后用户输入会更新该文件并且所有 (var a) 值都会改变。 不过，同样的问题已经出现了几次：我运行了一个函数来检索该值，但是我无法在函数之外使用该数据。即

document.getElementById('btn').addEventListener
        ('click', loadText);     
        function loadText(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'value.txt', true);
            xhr.onprogress = function(){
            }
            xhr.onload = function(){
                if(this.status = 200){
                    document.getElementById('text').innerHTML = this.responseText;
                }
            }
        xhr.send();
        }

请注意：我没有必要尝试让上面的代码工作。这只是我尝试过的一种方法。这也可能是一种低效的方法。
我想我的问题是“我该怎么办？”以及“我该怎么做？”

---- 最终目标是包含 64 种变体。

function colourabc(){
    var myNodeList = document.querySelectorAll('.abc');var i;
    for (i = 0; i < myNodeList.length; i++)
         {myNodeList[i].style.backgroundColor 
            = 'rgb(' + a + ',' + b + ',' + c + ')';
         }}

这组 64 个要重复至少 4 次。
我想要页面顶部的 4 个框，人们将 a、b、c 和 d 的值写入其中。

再次感谢

Answer 1

您不需要在任何地方“存储”a，因为它已经存在于您需要它的位置，即页面的 HTML 中。您需要访问该值并使用该值。

不要将a 视为代码中的常量，而应考虑编写作用于(a, b, c, d) 的函数。然后，当其中一个发生更改时，您可以使用事件侦听器使用您的新值重新运行这些函数。例如，将function colourabc() 更改为function colourabc(a, b, c)。

function doSomething(a, b, c, d) {
  colourabc( a, b, c );
  // do whatever else
}

function respondToChange () {
  // get current values for all three/four inputs
  const a = document.getElementById('input-a').value;
  const b = document.getElementById('input-b').value;
  const c = document.getElementById('input-c').value;
  const d = document.getElementById('input-d').value;
  // call doSomething with those values
  doSomething(a, b, c, d)
}

// respond to changes on all inputs
document.getElementById('input-a').addEventListener('change', respondToChange);
document.getElementById('input-b').addEventListener('change', respondToChange);
document.getElementById('input-c').addEventListener('change', respondToChange);
document.getElementById('input-d').addEventListener('change', respondToChange);

该代码可能更简洁，但希望您能理解。