i am trying to create a toast notification. I have 3 differents button and i want to change the color of the toast depending on which button i click. Note: the text you enter in the box is the text appearing in the toast.
Right now its all stacking up with the same color.
Heres the code ( the CSS is not good, i was just trying out things).
Can anyone help? Thanks a lot !
You can pass in a 'status' parameter to your function and determine the color to be used based on the status, like this:
function toast(status){
const inputVal = document.getElementById("myInput").value;
const container = document.getElementById("toastcontainer");
const toastdiv = document.createElement("div");
const toastColor = (status == 'error' ? 'red' : (status == 'success' ? 'green' : (status == 'info' ? 'blue' : '')));
toastdiv.style.backgroundColor = toastColor;
toastdiv.innerHTML = inputVal;
container.appendChild(toastdiv);
}
then pass it in in your HTML:
<button type="button" value="Error" onclick="toast('error')">Error</button>
<button type="button" value="Success"onclick="toast('success')">Success</button>
<button type="button" value="Info"onclick="toast('info')">info</button>