Javaスクリプトの値に基づいてCSS通知を表示したい

Question

javascriptの値に基づいてCSS通知を表示したい。しかし、現在のすべての通知が表示され、javascriptの値を通知ボックスに追加します。

これは、あなたが最初にすべてのアラートコンテナを隠し、その後、警告が表示されなければならないときhidden属性を削除するhidden属性を使用することができ、私のjavascriptの方法

var colorBox = function() { 
 

 
     alert("myValues" + myValues); 
 

 

 
     //document.getElementsByClassName('alert-box error').innerHTML=myValues[0];; 
 
     var myValues = [100]; 
 

 
     if (myValues[0] < 70) { 
 

 
     var container = document.getElementsByClassName('alert-box success'); 
 

 

 

 
     } else if (myValues >= 51 && myValues.value < 70) { 
 
     var container = document.getElementsByClassName('alert-box error'); 
 

 
     } else if (myValues <= 50) { 
 
     var container = document.getElementsByClassName('alert-box warning'); 
 

 
     } 
 
    } 
 
    colorBox();

<div class="alert-box error"><span>error: </span>Write your error message here.</div> 
 
<div class="alert-box success"><span>success: </span>Write your success message here.</div> 
 
<div class="alert-box warning"><span>warning: </span>Write your warning message here.</div> 
 
<div class="alert-box notice"><span>notice: </span>Write your notice message here.</div>

Answer 1

です。

var colorBox = function(value) { 
 

 
    if (value < 70) { 
 
    var container = document.getElementsByClassName('alert-box success')[0]; 
 
    container.removeAttribute('hidden'); 
 
    } else if (value >= 51 && value < 70) { 
 
    var container = document.getElementsByClassName('alert-box error')[0]; 
 
    container.removeAttribute('hidden'); 
 
    } else if (value <= 50) { 
 
    var container = document.getElementsByClassName('alert-box warning')[0]; 
 
    container.removeAttribute('hidden'); 
 
    } 
 
} 
 

 
colorBox(50); // or any other value

<div class="alert-box error" hidden><span>error: </span>Write your error message here.</div> 
 
<div class="alert-box success" hidden><span>success: </span>Write your success message here.</div> 
 
<div class="alert-box warning" hidden><span>warning: </span>Write your warning message here.</div> 
 
<div class="alert-box notice" hidden><span>notice: </span>Write your notice message here.</div>