How do I create a variable from a user's input using JavaScript

Question

I feel a bit silly, there is probably a real easy solution but I've spend days and I still can't find it.

All I'm looking to do is have a script filled with masses of (var a) and the user enters a number into an input (not a promt). then every (var a) becomes that number.

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...

I have done the following Brad Travesty crash courses: JavaScript, Node.js, AJAX, JSON, Fetch API. I've also looked a bit into localStorage.

Please help, 20 hours in the past 2 days with no progress and I'm going a little... 😵😬😖🥴

Thanks,
Jack

---(edit)---
I was thinking I'd have to have (var a) stored on a separate file then user inputs would update that file and all (var a) values would change. The same problem has come up a few times though: I run a function to retrieve the value but then I'm unable use that data outside of the function. i.e.

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();
        }

Please note: I'm not necessary trying to get the above code to work. This is simply one method I tried. It also may be an inefficient method.
I think my question is "What should I do?" as well as "How do I do it?"

---- The end goal is consists of this in 64 variations.

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

This set of 64 is to be repeated at least 4 more times.
I want 4 boxes at the top of the page that people write the values of a, b, c and d into.

Thanks again

Your question needs some more detail to understand what you are trying to do. Please see How do I ask a good question?. — terrymorse
– terrymorse, Commented Feb 7, 2021 at 20:40
where is your script supposed to work exactly? or what are you trying to build? — Zac
– Zac, Commented Feb 7, 2021 at 20:42
Where are you actually stuck? As it stands, your question appears unclear. Are you simply trying to do a string-replace? Are you trying to compute the value you've characterized as (output)? Have I misunderstood completely? Are you hoping to take an input file from the user, alter a whole bunch of instances of varA, before returning a newly created version of the input file? Please consider editing your question to make clear your intentions. :) — enhzflep
– enhzflep, Commented Feb 7, 2021 at 20:47
Thanks for you're replies everyone. I didn't include any code, as I have tried many different approaches, and didn't want to bore people with my long winded rambling. I've edited my post to explain further though. — SpeakinEkan
– SpeakinEkan, Commented Feb 7, 2021 at 22:16

Linda Paiste · Accepted Answer · 2021-02-08 00:14:31Z

1

You don't need to "store" a anywhere because it already exists where you need it to which is in the HTML of the page. What you need to to access that value and to use that value.

Instead of thinking of a as a constant in your code, think about writing functions that act on (a, b, c, d). Then you use event listeners to re-run those functions with your new values when one of them changes. For example, change function colourabc() to 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);

That code could be cleaner, but hopefully you get the idea.

answered Feb 8, 2021 at 0:14

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SpeakinEkan Over a year ago

YES!! I DIDIT!!!! WWWOOOOO!! :D Thank you so much. I had to work things out variable by variable but I feel I have a far better understanding of how functions work now. Can't thank you enough.

Collectives™ on Stack Overflow

How do I create a variable from a user's input using JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related