Я едва начал изучать JavaScript сегодня, и я пытаюсь изменить цвет текста «Дата» с белого на розовый с помощью кнопки «Сюрприз», но, похоже, ничего не работает.Все остальные кнопки работают нормально.(Я могу установить цвет текста на белый с CSS, не знаю, если это помешало, но с розовым ничего не произошло).
document.getElementById("button1").addEventListener("click",
function() {
document.getElementById("box").style.height = "400px";
document.getElementById("box").style.width = "400px";
}
);
document.getElementById("button2").addEventListener("click",
function() {
document.getElementById("box").style.backgroundColor = "blue";
}
);
document.getElementById("button3").addEventListener("click",
function() {
document.getElementById("box").style.opacity = ".5";
}
);
document.getElementById("button4").addEventListener("click",
function() {
document.getElementById("box").style.height = "150px";
document.getElementById("box").style.width = "150px";
document.getElementById("box").style.backgroundColor = "orange";
document.getElementById("box").style.opacity = "100";
}
);
document.getElementById("button5").addEventListener("click",
function() {
document.getElementById("Date").style.fontcolor = "pink";
}
);
<!DOCTYPE html>
<html>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<title>Jiggle Into JavaScript</title>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>
<br>
<p class="Date">Date</p>
</body>
</html>