how I generate a toast for each button

Question

how I generate a toast for each button

Navigation

#1 by (0 votes)

0

How can I do it so that in the message of the toast I generate the content I want. according to the button where you clicked.

<!DOCTYPE html>
<html>
<head>
<style>
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
</style>
</head>
<body>

<h2>Pruebas</h2>
<p>.</p>

<button onclick="myFunction()">Boton azul</button>

   
<div id="snackbar">has pulsado el boton azul </div>



<script>
function myFunction() {
    var x = document.getElementById("snackbar")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>

</body>
</html>

I am making a query and then according to the query it generates me x buttons. let's say the first button is called 1st Blue 2nd green 3rd purple

if I click on the blue button in the toast the message will tell me you pressed the blue button but if I click on the purple I keep saying you have pressed the blue button.

This is my Original code that I am using.

echo "<button class='w3-button' id='enviarProyecto' onclick='myFunction()'  >Enviar Proyecto </button>";
echo "<div id='snackbar'> Proyecto Enviado a @".$row['nombre']."</div>";


function myFunction() {
    var x = document.getElementById("snackbar")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

It has to see something of the Id, I've passed it. but I'm confused. Because it does not work.

javascript

asked by Marcos Portillo Garcia 15.10.2017 в 11:47

source

1 answer

Form does not update me when I update Does copied code from workbench not work for me on phpmyadmin?

score 0 · Answer 1

First you need one; in the first line of the function.

To make the function vary the behavior according to the button, add a parameter to the function indicated by the snackbar to be used. It can be for example the id of the corresponding snackbar.

And you change the function so that it raises the snackbar based on the parameter.

function myFunction(snackbarId) {
    var x = document.getElementById(snackbarId);
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);

Then in the html, you add the different snackbars with different id , and in the onclick you add the id as the parameter of the function.

<button onclick="myFunction('snack2')">Boton azul</button> 
<div id="snack2">has pulsado el boton azul </div>

}