Onclick event in two different pages

Asked

Viewed 124 times

-1

I’m practicing in JS and decided to create a program... a barbecue grill.

The point is, I created two pages index.html and the second so that when the user click the button calcular, it is redirected there, and the values load on this second page in list form.

I pointed both pages to the same Javascript file. The problem is that I don’t know what I’m doing wrong, because when I click the button, I get redirected to the second screen, but it doesn’t load the values as I wanted.

I wonder if you can help me by pointing out what I’m doing wrong?

index.html document:

<center class="container">
    <div class="card border-dark mb-3 my-5" style="max-width: 30rem;">
        <div class="card-header"><h3>Churrascômetro</h3></div>
        <div class="card-body text-dark">
            <form action="lista.html">
                <input type="number" id="adultos" class="form-control my-3 col-8" placeholder="Adultos">
                <input type="number" id="criancas" class="form-control my-3 col-8" placeholder="Crianças">
                <input type="number" id="duracao" class="form-control my-3 col-8" placeholder="Duração">
                <button type="submit" id="btnCalc"class="my-5 col-8 btn btn-outline-dark btn-lgbtn-block">Calcular</button>
                <div></div>
            </form>    

        </div>
    </div>
</center>

HTML of the second page:

center class="container">
    <div class="card border-dark mb-3 my-5" style="max-width: 30rem;">
        <div class="card-header"><h3>Lista de compras</h3></div>
        <div class="card-body text-dark">
            <a href="index.html" role="button" class="btn btn-outline-dark btn-block col-4">Novo Churrasco</a>
            <div id="lista"></div>
        </div>
    </div>
</center>

Javascript code:

var adultos = document.querySelector("#adultos")
var criancas = document.querySelector("#criancas")
var duracao = document.querySelector("#duracao")
var btnCalc = document.querySelector("#btnCalc")
var lista = document.querySelector("#lista")

btnCalc.onclick = function(e){
    e.preventDefault
    lista.innerHTML = "teste"
}
javascript javascript-events onclick

  • where on your page you are redirecting to another?

  • Explain some things that are not clear: Where is HTML da segunda página: would be the page lista.html? This javascript loose code belongs to which page? Your intention is to pass the values of the form fields on the page index.html for the element <div id="lista"></div> of the html where it is written HTML da segunda página:?

  • 1

    You can pass the data from one page to another by placing name in the form fields, and not id.

2 answers

0

In my opinion a solution would be the use of Cookies or of Webstorage.

You prune for example:

HTML first page

<center class="container">
    <div class="card border-dark mb-3 my-5" style="max-width: 30rem;">
        <div class="card-header"><h3>Churrascômetro</h3></div>
        <div class="card-body text-dark">
           <input type="number" id="adultos" class="form-control my-3 col-8" placeholder="Adultos">
           <input type="number" id="criancas" class="form-control my-3 col-8" placeholder="Crianças">
           <input type="number" id="duracao" class="form-control my-3 col-8" placeholder="Duração">
           <button type="button" id="btnCalc"class="my-5 col-8 btn btn-outline-dark btn-lgbtn-block">Calcular</button>
        </div>
    </div>
</center>

Javascript first page

var btnCalc = document.querySelector("#btnCalc");

btnCalc.onclick = function(e){
    var adultos = document.getElementById("#adultos").value;
    var criancas = document.getElementById("#criancas").value;
    var duracao = document.getElementById("#duracao").value;

    localStorage.setItem("adultos", adultos);
    localStorage.setItem("criancas", criancas);
    localStorage.setItem("duracao", duracao);

     window.location.href="segundapagina.html";
}

HTML second page

center class="container">
    <div class="card border-dark mb-3 my-5" style="max-width: 30rem;">
        <div class="card-header"><h3>Lista de compras</h3></div>
        <div class="card-body text-dark">
            <a href="index.html" role="button" class="btn btn-outline-dark btn-block col-4">Novo Churrasco</a>
            <div id="lista"></div>
        </div>
    </div>
</center>

Javascript second page

window.onload = function(){
    var lista = document.querySelector("#lista");
    var adultos = localStorage.getItem("adultos");
    var criancas = localStorage.getItem("criancas");
    var duracao = localStorage.getItem("duracao");

    //resto da função
}

Are two separate JS files.

-1

Browser other questions tagged javascript javascript-events onclick

You are not signed in. Login or sign up in order to post.