Home>
I want to ask: Why can't you use element.setAttribute when setting the background-color value in JavaScript?
I'm trying to implement a function that sets the CSS background-color parameter rgba () when a button is pressed in JavaScript.
I implemented it while doing the following action learning tasks.
JavaScript | MDN | Image Gallery
https://developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Image_gallery
<button>Darken</button>
. overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba (0,0,0,0);
}
The relevant part of JavaScript is below.
const overlay = document.querySelector ('. overlay');
btn.onclick = function (e) {
if (e.target.textContent === "Darken") {
e.target.setAttribute ("class", "light");
e.target.textContent = "Lighten";
// Set the backgroundColor value here
overlay.style.backgroundColor = "rgba (0,0,0,0.5)";
<//// The following three writing methods do not work.
//Overlay.style.opacity = 0.5;
//overlay.fillStyle = rgba (0,0,0,0.5);
//overlay.style.setAttribute("background-color "," rgba (0,0,0,5) ");
The full text of JavaScript is also included.
const displayedImage = document.querySelector ('. displayed-img');
const thumbBar = document.querySelector ('. thumb-bar');
const btn = document.querySelector ('button');
const overlay = document.querySelector ('. overlay');
/ * Looping through images * /
createImages ();
function createImages () {
for (let i = 1;i<6;i ++) {
let newImage = document.createElement ('img');
newImage.setAttribute ('src', "images/pic" + i + ".jpg");
newImage.setAttribute ("id", "image" + i);
thumbBar.appendChild (newImage);
}
}
changeMainPic ();
function changeMainPic () {
for (let i = 1;i<6;i ++) {
let imgBtn = document.getElementById ("image" + i);
console.log (imgBtn);
imgBtn.addEventListener ("click", function () {
displayedImage.setAttribute ("src", "images/pic" + i + ".jpg")
});
}
}
/ * Wiring up the Darken/Lighten button * /
// use anonymous functions
btn.onclick = function (e) {
if (e.target.textContent === "Darken") {
e.target.setAttribute ("class", "light");
e.target.textContent = "Lighten";
overlay.style.backgroundColor = "rgba (0,0,0,0.5)";
//overlay.style.opacity = 0.5;
//overlay.fillStyle = rgba (0,0,0,0.5);
//overlay.style.setAttribute("background-color","rgba(0,0,0,5) ");
}
else {
e.target.setAttribute ("class", "dark");
e.target.textContent = "Darken";
overlay.style.backgroundColor = "rgba (0,0,0,0)";
//overlay.style.opacity = 0;
//overlay.fillStyle = rgba (0,0,0,0);
//overlay.style.setAttribute("background-color","rgba(0,0,0,0) ");
}
}
None of the above three lines on the JavaScript side can set the value of rgba ().
Especially why the setAttribute browser built-in function cannot be used because the value of rgba () is already set in the CSS file.
I think.
I'm sorry for the beginner's question, but please give me some advice!
SupplementMac OS Catalina
Browser Chrome
-
Answer # 1
Related questions
- javascript : How do I make a `connect4` board with rounded corners and depressed cells?
- javascript : Came up image on Google Chrome, cross-browser compatibility
- javascript : Why does the main page open instead of opening a modular window
- Uncaught TypeError: Cannot read property 'style' of undefined javascript
- javascript : How to bind a video to a button?
- javascript : How to make an exit block when pressed
- javascript : How to make datalist open only after entering 3 characters
- javascript : Overlay an image on top of another in a div
- javascript : I want to arrange images without HTML and CSS grid
- javascript : How do I split a word into letters if they are in the same div?
Working sample:https://jsfiddle.net/pbc5wa7z/
There is no problem with JavaScript itself, and it seems that it cannot be clicked because
.overlay
is put onbutton
.Try making it opaque instead of
rgba (0,0,0,0)
.