I am building an app in React and am making a settings element. The element is a button that changes size on-click; which I have already achieved:
import SettingsA from "./images/settingsA.png";
import SettingsB from "./images/settingsB.png";
var settingActivated = 0;
function settingFunc() {
settingActivated++;
if (settingActivated%2===0) {
document.getElementById("settingBut").setAttribute("style", "width: 6rem; background-image: {SettingsA}");
document.getElementById("fontBut").setAttribute("style", "width: 0rem; height: 4rem;");
} else {
document.getElementById("settingBut").setAttribute("style", "width: 10rem; background");
document.getElementById("fontBut").setAttribute("style", "width: 7rem; height: 4rem;");
}
}
<div id="settings">
<button id="settingBut" onClick={settingFunc}></button>
<div id="settingDropdown">
<button id="fontBut" onClick={legacyFont}>Legacy<br/>Font</button>
</div>
But what I want to do is make it so the setting icon displayed on the button can change on-click as well. Please help me out. Specifically: the image is passed to the button via css background-image
, & the css is passed to the button via on-click function using .setAttribute
; I am fine with setting the image via path or import variable, I just want it to work. settingFunc
and legacyFont
functions are not provided in my code, everything involved with my prompt is provided.