Как изменить цвет div в зависимости от того, какую кнопку я нажимаю? (javascript / css / html ТОЛЬКО без библиотеки) - PullRequest
Новая
       28

Как изменить цвет div в зависимости от того, какую кнопку я нажимаю? (javascript / css / html ТОЛЬКО без библиотеки)

0 голосов
/ 31 января 2020

Я пытаюсь создать тост-уведомление. У меня есть 3 разные кнопки, и я хочу изменить цвет тоста в зависимости от того, какую кнопку я нажимаю. Примечание: текст, который вы вводите в поле, является текстом, отображаемым в тосте.

Сейчас все складывается с одним цветом.

Вот код (CSS нехорошо, я просто пробовал что-то).

ПРИМЕЧАНИЕ: Я не могу использовать любую библиотеку, чистый javascript / html / css NO jquery

Кто-нибудь может помочь? Большое спасибо!

HTML

<!DOCTYPE html>
<html>

</html>
<head>
    <meta charset="utf-8" />
    <title>Toast Notification</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

    <input type="text" placeholder="Grille pain" id="myInput">

    <button type="button" value="Error" onclick="toast()">Error</button>

    <button type="button" value="Success"onclick="toast()">Success</button>

    <button type="button" value="Info"onclick="toast()">info</button>

    <div id="toastcontainer">

    </div>
    <script src="toast.js"></script>
</body>

JAVASCRIPT

function toast(){
    const inputVal = document.getElementById("myInput").value;

    const container = document.getElementById("toastcontainer");

    const toastdiv = document.createElement("div");
    toastdiv.innerHTML = inputVal;
    container.appendChild(toastdiv);

}

CSS

#toastcontainer{
  width: 35%;
  position: absolute;
  bottom: 2%;
  left: 2%;
  border-color: #333333;
  background-color: blue;
}

Ответы [ 2 ]

2 голосов
/ 31 января 2020

Вы можете передать параметр 'status' в вашу функцию и определить цвет, который будет использоваться, на основе статуса, например: 

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);
}

, а затем передать его в вашем 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>
1 голос
/ 31 января 2020

Simple Here \ 

document.getElementById( 'button1' ).addEventListener('click', function (event) {
console.log('green')
color('green', 'color')
}, false);
document.getElementById( 'button2' ).addEventListener('click', function (event) {
console.log('gold')
color('gold', 'color')
}, false);
document.getElementById( 'button3' ).addEventListener('click', function (event) {
console.log('blue')
color('blue', 'color')
}, false);
function color(color, id){
document.getElementById(id).style.backgroundColor=color;
}
#color{
width:150px;
height:50px;
background-color:black;
}
<div id ='color'></div>
<button id ='button1'>Green</button>
<button id ='button2'>gold</button>
<button Id="button3">blue </button>
...