multiple onclick events on a single div - changing the div border colors - javascript

问题

I've put this code inside the div:

onclick="this.style.border='solid 1px red';"

How to insert multiple onclick events which would trigger changes of border colors - for example 1st click - red, 2nd click - blue, 3rd click - reset?

This is exactly what I need - changes of the one particular div with multiple onclick events, not improvisations with multiple divs.

edit:

I also have other actions called with onclick + I have onmouseenter and onmouseleave events inside of the same div. Everything work as it should, I only can't get multiple onclick events to work.

I can't get any of these functions to work and I can't tell why. Maybe because I have more actions and events, or maybe it's up to Wordpress?

(I put a function in the header area inside of <script></script>)

I thought this will be easier than playing a sound, but surprisingly sounds were a piece of cake and this seems to be a real challenge...

can somebody help?

edit2: It was up to Wordpres. Now I know how to make proper functions to work.

edit3: I've edited a little solution posted by user1875968, and I finally got exactly what I want (with proper reset):

var linkClick = 1; 
  function update_link(obj){ 
  if (linkClick == 1){obj.style.border = 'solid 1px red'};
  if (linkClick == 2){obj.style.border = 'solid 1px blue'};
  if (linkClick == 3){obj.style.border = 'solid 1px green'};
  if (linkClick >3 ) {obj.style.border = 'solid 1px #555555'; linkClick=0};
  linkClick++; 
}

thanks everybody for your help ;)

回答1:

<script> 
var linkClick = 0; 
  function update_link(obj){ 
  if (linkClick == 0){obj.style.border = 'solid 1px red'};
  if (linkClick == 1){obj.style.border = 'solid 1px blue'};
  if (linkClick >1 ) {obj.style.border = 'solid 1px red'; linkClick=0};
  linkClick++; 
}
</script>

HTML

<a href='#' onclick='update_link(this)'> my link </a>

回答2:

you can make use of functions and css classes.

Identify the styles you want to switch between as different classes. Let's take them as:

.redBorder
{
   border: 1px solid red;
}

.blueBorder
{
   border: 1px solid blue;
}

.resetBorder
{
   border: none;
}

declare a function on the click event of the div:

onclick="switchBorder(this);"

Inside the function, use a switch case on the div class:

function switchBorder(divObj)
{
   prevClass = divObj.className;

   switch( prevClass )
   {
       case 'redBorder':
           divObj.className = "blueBorder"
           break;

       case 'blueBorder':
           divObj.className = "resetBorder"
           break;

       case 'resetBorder':
           divObj.className = "redBorder"
           break;

    }
}

Hope that helps. :)

Edit: syntax mistake.

回答3:

The only way i could think of is changing the on-click event every time it's fired like:

x.onclick = method1;

function method1()
{
x.onclick = method2;
}

funbction method2()
{
x.onclick = method3;
}

function method3()
{
x.onclick = method1;
}

回答4:

You can make use of integers

onclick="my_function()"

and then:

function my_function(){
  i++;
  if(i == 1){
    //red
  }
  if(i == 2){
    //blue
  }
  if(i == 3){
    i = 0;
    // reset
  }
}

回答5:

it's best to use javascript for this.

var clicks = 0;

function changeBorder() {
    if(++clicks > 2) clicks = 1;
    switch (clicks) {
        case 1 : { this.style.border='solid 1px red';}; break;
        case 2 : { this.style.border='solid 1px blue';}; break;
    }
}

But you have to adapt on the "this" element. (i don't know which one it is, use getElementById)

and use in HTML,

onclick="changeBorder()"

回答6:

Something like this. Presuming the default border is "1px solid black". This can be extended to contain as many changes and colors as you want.

function changeBorder(ele){

 var colors = ["1px solid black", "1px solid red", "1px solid blue"];
 var curInd = colors.indexOf(ele.style.border);

 if(curInd != colors.length-1){  //If the current color isn't the last one
    //Next color
    ele.style.border = colors[curInd++];
 } else {
    //Reset to first color
    ele.style.border = colors[0];
 }
}

NOTE: array.indexOf is an ECMAscript 5 implementation for older browsers please include the shim found here

回答7:

Try using a global variable like colorCode and initialize it to zero—colorCode=0

And call a function onClick="ChangeBGColor()"

function ChangeBGColor()
{
    colorcode++;
    var color='';

    if (colorcode==1)
    {
        color='red';
    }
    else if (colorcode==2)
    {
        color='blue';    
    }
    else
    {
        colorCode=0; /*Reset to zero if colorCode =3 or more*/
        color='gray';
    }

    this.style.border="'solid 1px "+color+ "';" /* Need to correctly apply style for the specific contol*/
}

回答8:

<div id="x" onclick="Clicked"></div>
<script type="text/javascript">
   var clickno=1;
   function Clicked()
   {
      if(clickno==1)
      {
         document.getElementById('x').style.border="solid 1px red";
      }
      if(clickno==2)
      {
         document.getElementById('x').style.border="solid 1px blue";
      }
      if(clickno==3)
      {
         document.getElementById('x').style.border="solid 1px red";
         clickno=1;
      }
      clickno++;
   }
</script>

来源：https://stackoverflow.com/questions/18015562/multiple-onclick-events-on-a-single-div-changing-the-div-border-colors-javas

标签

javascript

html

onclick

mouseevent