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](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or a [cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies). — Mr. Polywhirl, Sep 30 '20 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, Sep 30 '20 at 13:11
Oh, ok, I didn't know that, thanks. How would I pass it via URL param? — Fox GAMING_NTF, Sep 30 '20 at 13:15

score 1 · Accepted Answer · edited Sep 30 '20 at 13:20

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 '20 at 13:20

Dharman

30,962
25
85
135

answered Sep 30 '20 at 13:14

Jelmer Overeem

359
1
10

Thanks! And I would do #1 by just hiding and unhiding divs, I assume? – Fox GAMING_NTF Sep 30 '20 at 13:28
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. https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML – Jelmer Overeem Sep 30 '20 at 13:35
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? – Fox GAMING_NTF Sep 30 '20 at 14:35
Option 2. But depends on your experience. Just check them out and experiment. – Jelmer Overeem Sep 30 '20 at 15:15
Yeah, I've mostly looked at option two, I haven't gotten it to work yet. – Fox GAMING_NTF Sep 30 '20 at 15:48

score 1 · Answer 2 · answered Sep 30 '20 at 13:15

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 '20 at 13:15

lissettdm

12,267
1
18
39

Wow, I don't know how I didn't realize that, thanks. – Fox GAMING_NTF Sep 30 '20 at 13:22

How to set textbox input to a variable

2 Answers2