Working on a new project, I encountered an issue with two elements sharing the same class but displaying different color shades. Has anyone experienced this before and knows what could be causing it?
UPDATE Here is an excerpt of the code:
The Class:
.summer{
background-color: #0077be;
/*background-image... */
}
The HTML:
<button onclick="prnt();">Print</button>
<div class="recipe" id="0">
<div class="tabs">
<a class="tab"> </a>
</div>
<div class="page">
<p>The recipes you'll find here are ones you can use to impress guests at your next get together</p>
</div>
</div> <!--recipe card end-->
<div class="recipe" id="1">
<div class="tabs">
<a class="tab">Chicken Clubhouse Sandwiches</a>
</div>
<div class="page">
<h1>Chicken Clubhouse Sandwiches</h1>
<div class="head">
<b>From: </b> <a href="#">Source</a><br>
<b>Makes: </b> 2 Sandwiches<br>
<button onclick="makeLink(1);">Share Link</button><br>
</div>
<div class="card">
<div class="pic">
<img src="/uploads/1/0/4/0/104012940/custom_themes/406340590114946394/files/images/lunch2.jpg">
</div>
<div class="ing">
<b>Ingredients</b>
<ul>
<li>6 slices of bread</li>
<li>6 Slices of bacon</li>
<li>Cooked chicken breast, cut into chunks</li>
<li>Shredded Lettuce</li>
<li>Sliced Tomato</li>
<li>Mayonnaise</li>
<li>Heinz Chili Sauce</li>
</ul>
</div>
<div class="pro">
<b>How to Make</b>
<ol>
<li>Toast the bread and cook the bacon</li>
<li>Assemble in the following order:
<ul>
<li>Toast</li>
<li>Mayo</li>
<li>Lettuce</li>
<li>Tomato</li>
<li>Toast</li>
<li>Chicken</li>
<li>Bacon</li>
<li>Chili Sauce</li>
<li>Toast</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
</div> <!--recipe card end-->
The Application of the Class:
function button(season){
switch(season){
case 1:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className+="spring";
});
break;
case 2:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className += "summer";
});
break;
case 3:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className+="fall";
});
break;
case 4:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className+="winter";
});
break;
default:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.style.backgroundColor="#FFF";
});
break;
}
}