How to set textbox input to a variable

Question

I'm currently just getting into JavaScript with HTML. I have been using HTML and CSS for a while now, but I only just recently got into Python, so now I feel I'll be more capable / able to understand JavaScript.

I'm currently working on an idea I've had, a Fortune Cookie Maker. The user inputs text into a textbox input. This is stored in a variable. When the user clicks ok, it gets the text from the textbox, and sets it to that variable. Then, it switches the page, and gets the variable from the script, and sets a paragraph to the text value of that variable.

However, my problem is, the paragraph won't display the text.

Here's my code:

var fortune = null;

function dispTxt() {
  var txt = document.getElementById('textbox').value;
  var hid = document.getElementById('conftxt');

  if (txt.length > 0) {
    //hid.style.display = 'block';
    document.getElementById("conftxt").style.opacity = 1;
    document.getElementById("textbox").style.color = "#ffffff";
  } else {
    //hid.style.display = 'none';
    document.getElementById("conftxt").style.opacity = 0;
    //document.getElementById("textbox").style.color = "#000000";
  }

  document.getElementById("txt").addEventListener("onkeyup", function() {
    dispTxt();
  })
};

function confirm() {
  //Get the text that is inputted by the user.
  fortune = document.getElementById("conftxt").value;
  window.location = "fortune.html";
  window.alert(fortune);
}

function setFortune() {
  document.getElementById('fortunetext').value = fortune;
}

And here's a link to the repl itself for reference.

Also, if anyone has any tips for how I should go about making the fortune cookie itself, please, let me know. I essentially just want it to be so that once you confirm what the fortune says, the fortune cookie appears, and you can click on it, and break it open, and it reveals the fortune.

Thanks!

Not sure I understand completely, but you want to store the value from one page and use it in another? You could use localStorage or a cookie. — Mr. Polywhirl
– Mr. Polywhirl, Commented Sep 30, 2020 at 13:09
Looks like you're navigating between pages (setting window.location does that), that's going destroy and recreate your JS runtime environment, so your local variables will get cleared. @Mr.Polywhirl's suggestions are good. Or you could pass it via URL param when you navigate, or you could build it as a single-page app (SPA). — Mic
– Mic, Commented Sep 30, 2020 at 13:11
Oh, ok, I didn't know that, thanks. How would I pass it via URL param? — Fox GAMING_NTF
– Fox GAMING_NTF, Commented Sep 30, 2020 at 13:15

Dharman · Accepted Answer · 2020-09-30 13:20:35Z

1

You say fortune = document.getElementById("conftxt").value;, but #conftxt is the button element.

fortune = document.getElementById("textbox").value; will do

But because the page refreshes/redirects to fortune.html the variable fortune is cleared again.

You have two options:

Use one HTML page, so you don't use redirects
Store the variable in localStorage or sessionStorage
Pass the value into the URL param. Links: Pass variable to URL and Get the passed variable from URl

I recommend 1.

edited Sep 30, 2020 at 13:20

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Sep 30, 2020 at 13:14

Jelmer Overeem

4281 gold badge4 silver badges12 bronze badges

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

5 Comments

Fox GAMING_NTF Over a year ago

Thanks! And I would do #1 by just hiding and unhiding divs, I assume?

Jelmer Overeem Over a year ago

That is a possibility. You could also use .remove() and .insertAdjacentHTML(). See what works best for you. I don't really know what is best practice. developer.mozilla.org/en-US/docs/Web/API/Element/…

Fox GAMING_NTF Over a year ago

Ok, thanks. And If I decide not to use only one HTML page, which one of those other options do you think would be the easiest to do?

Jelmer Overeem Over a year ago

Option 2. But depends on your experience. Just check them out and experiment.

Fox GAMING_NTF Over a year ago

Yeah, I've mostly looked at option two, I haven't gotten it to work yet.

lissettdm · Accepted Answer · 2020-09-30 13:15:39Z

1

You can't get the value because you are getting the wrong element

function confirm () {
  fortune = document.getElementById("conftxt").value;
  ...
}

Should be

function confirm () {
    fortune = document.getElementById("textbox").value;
  ...
}

Also, you are navigating between different pages, so, you need to pass this value

answered Sep 30, 2020 at 13:15

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

1 Comment

Fox GAMING_NTF Over a year ago

Wow, I don't know how I didn't realize that, thanks.

Collectives™ on Stack Overflow

How to set textbox input to a variable

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related