How can I click on the background to change blue to red and red to blue? What's wrong with my code? Help, thank you

Question

***huihui · Answer

<html>

<head>

</head>

<style>

#test1 {

width:300px;

height:300px;

background-color:blue;

}

</style>

<body>

<div id="test1"></div>

</body>

function test1() {
        var a = document.getElementById('test1');
var finalStyle = a.currentStyle ? a.currentStyle : document.defaultView.getComputedStyle(a, null);/*利用判断是否支持currentStyle（是否为ie）
13     来通过不同方法获取style*/
if(finalStyle.backgroundColor=="rgb(0, 0, 255)"){

a.style.backgroundColor="red"; 
}
else if(finalStyle.backgroundColor=="rgb(255, 0, 0)"){

a.style.backgroundColor="blue";

}

}
  
function addEvent(obj,type,handle){
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

window.onload = function(){
        var element = document.getElementById("test1");
        addEvent(element,"click",test1);
      }
</script>

</html></pre>
<p><br></p>

***huihui · Answer

#test1 {

width:300px;

height:300px;

有人@我 · Answer

You can use addinventlisner() to listen for click events, initialize it to red, change it to blue when you click it for the first time, and then turn it to red when you click it again
##Preparation A class{background-color:#f00}, when you click it, add a class name to it, and when you click it again, let it remove the class name
You can use move in Remove event

p～ang～胖 · Answer

A is undefined when executed for the second time. Just put var a = document.getElementById('test1'); outside the function

dabour · Answer

Shouldn’t just change one ID, if the match is successful, another one will be displayed

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial