Passing Variables Between Pages Using Localstorage And Passing Variables In A Link

February 28, 2024 Post a Comment

I am learning js, recently, I apologize for my English and for the obviousness of my questions. I have two problems, I would appreciate solutions in pure JavaScript. Following seve

Solution 1:

Rather than using id, you can use class for showing result because id is unique. Also for storing male, female or neutral you can use radio buttons, and when you click any of them, just save the result in the localStorage. Here are the three pages.

page1.html

<body><p> Hello! what's your name?</p><formaction="page2.html"><inputtype="text"id="txt" /><inputtype="submit"value="name"onClick="passvalues();" /></form><script>functionpassvalues() {
            var nme = document.getElementById("txt").value;
            localStorage.setItem("textvalue", nme);
            returnfalse;
        }
    </script></body>

page2.html

<body>
    enter code here
    <p>Hi <spanclass="result">Lucy<span> nice to meet you!</p><p>How are you today <spanclass="result"></span>?</p><ahref="page3.html">page3</a><script>var result = document.getElementsByClassName('result');

        [].slice.call(result).forEach(function (className) {
            className.innerHTML = localStorage.getItem("textvalue");
        });

    </script></body>

page3.html

<body><p><spanclass="result"></span> which gender designation do you prefer to be used with you?</p><formname="genderForm"action=""><inputtype="radio"name="gender"value="male"> Male<br><inputtype="radio"name="gender"value="female"> Female<br><inputtype="radio"name="gender"value="neutral"> Neutral
    </form><p>You've selected <spanclass="selectedGender"></span></p><script>var result = document.getElementsByClassName('result');

        [].slice.call(result).forEach(function (className) {
            className.innerHTML = localStorage.getItem("textvalue");
        });

        var rad = document.genderForm.gender;
        var prev = null;
        for (var i = 0; i < rad.length; i++) {
            rad[i].addEventListener('change', function () {
                (prev) ? console.log(prev.value) : null;
                if (this !== prev) {
                    prev = this;
                }
                console.log(this.value);
                document.getElementsByClassName("selectedGender")[0].innerHTML = this.value;
                localStorage.setItem("gender", this.value);
            });
        }
    </script></body>

Solution 2:

You have just discovered why you cannot have two elements on the same page with the same ID - only the first one will work. However, classes work almost exactly like IDs, so just use the same className at both locations:

<p>Hi <spanclass="result">Lucy<span> ...
...
<p>How are you today <spanclass="result">Lucy</span> ...

As to your second problem, just use localStorage again. Set a different localStorage variable and read/write that.

However, what you are probably thinking of is using a query string, like this:

<ahref="person.html?gender=f">female</a>

See this SO question for information and code examples.

javascript edu