Attempting to change css styling of an element through Javascript (.setAttribute). It works normally though when implementing this into my website it does not work. The function triggers when the screen resizes but the .setAttribute action does not function, it refuses to change the element but sends alerts telling me the function is being called. Nevertheless, I have an alert passing me the element I am trying to edit and different style values of that element. Despite failing to be able to change the styling, the element is found when the function triggers; I set the opacity of the element to 0 and had an alert pass me the opacity following and it registered as 0 (registering the change) though it does not physically do anything to the element through HTML. I attempted to see if I could see the element change briefly in the chrome console when the function triggers and it does not highlight/change at all.
<!DOCTYPE html>
<html>
<body>
<button id="my_button" onclick="paddingr_resize()">Try it</button>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function paddingr_resize(){
var w = window.innerWidth;
alert(w)
if (w >= 1){
alert("perfect")
let main_details1 = "grid-template-columns:100%;"
document.getElementById("my_button").setAttribute("style", (main_details1));
}else if(w <= 1225 && w >= 1036){
alert("2")
}
}
var globalResizeTimer = null;
$(window).resize(function() {
if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
globalResizeTimer = window.setTimeout(function() {
paddingr_resize();
}, 200);
});
</script>
</body>
</html>