Javascriptでさまざまな色のアラートメッセージを作成する

Question

簡単なアラートメッセージを作成しようとしていますが、ユーザーがログインに失敗した場合、アラートメッセージの背景色は赤で、ユーザーアラートに正常にログインするbackground-colorは緑色です。私はそれを作る方法がわからないのは、ユーザーが 'alert'というdivの代わりに 'alertsuccess' divを使用してログインした場合です。私は任意のヘルプが

<div id="alert" style="display:none;"> 
<span class="closebtn" onclick="this.parentElement.style.display='none';">& times;</span> 
<p id="alertmsg"> </p> 
</div> 

<div id="alertsuccess" style="display:none;"> 
<span class="closebtn" onclick="this.parentElement.style.display='none';">&  times;</span> 
<p id="alertmsg"> </p> 
</div> 

<input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required> 

<button id="button123" onclick="showalert('alert');">Submit</button> 

を高く評価している私のJavascriptの代わりにすることができます2 div年代を使用しての

function showalert(id){ 
var divelement = document.getElementById(id); 
var username = document.getElementById("username").value; 

    if (username === ""){ 
    document.getElementById("alertmsg").innerHTML = "You didn't insert a username!"; 
    divelement.style.display =='none' 
    divelement.style.display = 'block'; 
    } 

    else if(username === "u1460714"){ 
    document.getElementById("alertmsg").innerHTML = "Successfully logged in"; 
    divelement.style.display =='none' 
    divelement.style.display = 'block'; 
    } 
    } 

最後に私のCSS

#alert { 
height:100px; 
width:300px; 
background-color: #f44336; 
color: white; 
position: fixed; 
} 

.closebtn { 
margin-left: 15px; 
color: white; 
font-weight: bold; 
float: right; 
font-size: 22px; 
line-height: 20px; 
cursor: pointer; 
transition: 0.3s; 
} 

.closebtn:hover { 
color: black; 
} 

#alertmsg{ 
font-family:sans-serif; 
font-size:15px; 
text-align: center; 
} 

#alertsuccess { 
background-color: #4CAF50; 
} 

Answer 1

あなたができることは、あなたのIDでdivを作成し、cssクラスを使って入力に基づいて外観を変えることです。 alert divの下に新しいdivを作成するのではなく、クラスの警告と成功で外観を変更するだけです。 id 'alert'のdivは、javascriptで定義したクラスを除いて決して変更されません。

特に#alert、＃alert.alert、＃alert.successを見てください。注意すべき点は、idが 'alert'のdivはデフォルトで非表示になっていることです。javascriptではこれを無効にすることができます。また、要素が再利用可能でなく、クラスを使用しているため、要素上でidを使用しないようにしてください。

function showalert(id) { 
 
    var divelement = document.getElementById('alert'); 
 
    var username = document.getElementById("username").value; 
 
    if (username === "") { 
 
    document.getElementById("alertmsg").innerHTML = "You didn't insert a username!"; 
 
    divelement.style.display = 'block'; 
 
    divelement.className = 'alert' 
 
    } else if (username == "u1460714") { 
 
    document.getElementById("alertmsg").innerHTML = "Successfully logged in"; 
 
    divelement.style.display = 'block' 
 
    divelement.className = 'success' 
 
    } 
 
}

#alert { 
 
    height: 100px; 
 
    width: 300px; 
 
    color: white; 
 
    position: fixed; 
 
    display: none; 
 
} 
 

 
#alert.alert { 
 
    background-color: #f44336; 
 
} 
 

 
#alert.success { 
 
    background-color: #4CAF50; 
 
} 
 

 
.closebtn { 
 
    margin-left: 15px; 
 
    color: white; 
 
    font-weight: bold; 
 
    float: right; 
 
    font-size: 22px; 
 
    line-height: 20px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
.closebtn:hover { 
 
    color: black; 
 
} 
 

 
#alertmsg { 
 
    font-family: sans-serif; 
 
    font-size: 15px; 
 
    text-align: center; 
 
}

<div id="alert"> 
 
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
 
    <p id="alertmsg"> </p> 
 
</div> 
 

 
<input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required> 
 

 
<button id="button123" onclick="showalert('alert');">Submit</button>

Answer 2

この取り掛かるするかどうかはわかりませんその色を設定するだけです。同じidを2回使用する問題に遭遇することはありません。

function showalert(alert) { 
 
    var alertBlock = document.getElementById(alert); 
 
    var inputName = document.getElementById('username'); 
 
    var messageBlock = document.getElementById('alertmsg'); 
 
    alertBlock.style.display = 'block'; 
 
    if (inputName.value == '') { 
 
    alertBlock.style.backgroundColor = 'red'; 
 
    messageBlock.innerHTML = 'No username entered'; 
 
    } else if (inputName.value == 'u2345') { 
 
    alertBlock.style.backgroundColor = 'green'; 
 
    messageBlock.innerHTML = 'You entered the specific username'; 
 
    } 
 
    
 
}

#alert { 
 
    width: 200px; 
 
    height: 200px; 
 
    display: none; 
 
}

<div id="alert"> 
 
<span class="closebtn" onclick="this.parentElement.style.display='none';">X</span> 
 
<p id="alertmsg">test</p> 
 
</div> 
 

 
<input type="text" id="username" placeholder="Username"name="uname" maxlength="15" required> 
 

 
<button id="button123"onclick="showalert('alert');">Submit</button>

Answer 3

私はあなたがそこに

divelement.style.display =='none'; 

にタイプミスがあると思う= 'どれも' あってはならないか、それは比較を行います。他にも同じような行があります。これがうまくいきたいです