It is shown in graph click number of times, and eliminate the number-CodePudding

My question is this: create three elliptic, with red, green, blue, use the correct API display a name in the round, but does not use images, in each circle, display it by clicking the number of times, for example, if I click on the green circle three times, it should be in the center display "3", each circle should track their clicks, at the same time there is a button to clear the clicks every round,

CodePudding user response:

 
 
 

 
<meta charset="UTF-8"> 
  
<style> 
. Color> Div {
Height: 300 px; 
width: 300px; 
border-radius: 50%; 
display: inline-block; 
The line - height: 300 px; 
text-align: center; 
The font - size: 60 px; 
cursor: pointer; 
} 
. Color> Div: NTH - of - type (1) {background - color: red} 
. Color> Div: NTH - of - type (2) {background - color: green} 
. Color> Div: NTH - of - type (3) {background - color: blue} 
</style> 
 

<body> 

 
 
 
 

 
Window. The onl oad=function () {
Var color=0, 0; 
Var colorlist=document. GetElementsByClassName (" color ") [0]. Children; 
For (let id in colorlist) {
Colorlist [id]. Id=id; 
Colorlist [id]. onm ousedown=function (e) {
Enclosing innerHTML=e.b utton===0? + + color [this id] : -- color [this. Id];//the left mouse button plus right minus 
} 
} 
} 
</script>

CodePudding user response:

Your code can't use,

CodePudding user response:

refer to the second floor zhtoad response:

can't use your code,

how can't use???????

CodePudding user response:

 & lt; ! DOCTYPE html> 
 

 
<meta charset="UTF-8"> 
  
<style> 
. Color> Div {
Height: 300 px; 
width: 300px; 
border-radius: 50%; 
display: inline-block; 
The line - height: 300 px; 
text-align: center; 
The font - size: 60 px; 
cursor: pointer; 
} 
. Color> Div: NTH - of - type (1) {background - color: red} 
. Color> Div: NTH - of - type (2) {background - color: green} 
. Color> Div: NTH - of - type (3) {background - color: blue} 

The BTN {

} 
</style> 
 

<body> 

 
 
 
 

 
 
 
 

 
Window. The onl oad=function () {
Var color=[0, 0, 0]; 
Var colorlist=document. GetElementsByClassName (" color ") [0]. Children; 
Var btnlist=document. GetElementsByClassName (" BTN ") [0]. Children; 
For (let id in colorlist) {
Colorlist [id]. Id=id; 
Btnlist [id]. Id="BTN" + id; 
Colorlist [id]. onm ousedown=function (e) {
Enclosing innerHTML=e.b utton===0? + + color [this id] : -- color [this. Id];//the left mouse button plus right minus 
} 
Btnlist [id]. onm ousedown=function (e) {
Color [id]=0 
Document. The getElementById (id). The innerHTML=0 
} 
} 
} 
</script>