简体   繁体   中英

Is it possible to use more than one changeable divName in getelementbyid?

In this sort of function

function someFunction(divName) 
{
    document.getElementById(divName).style.someproperty = 'something'
    document.getElementById(divName).style.someotherproperty = 'somethingelse'
}

called like this

onClick = "someFunction('someid')

Is there any way to have more than one divName that can be specified in the html?

eg

onClick = "someFunction('someid','someotherid')

The first getelementbyid being performed on 'someid' and the second on 'someotherid'

Preferably without jQuery

Edit:

I don't want to do the same thing to each of the two elements, I want to do something different to each individual element, but I want to be able to specify each element in the onClick ="..." instead of in the actual function, so that I don't have to write multiple functions for each combination of two target elements.

Sorry if that was unclear

The Answer (as it turns out, is really simple):

function someFunction(divName,divName2) 
{
    document.getElementById(divName).style.someproperty = 'something'
    document.getElementById(divName2).style.someotherproperty = 'somethingelse'
}

html

 onClick = "someFunction('someid','someotherid')"

When I tried it the first time, I wrote "someFunction('someid,someotherid')" and when it didn't work I assumed that the solution wasn't as easy as divname1,divname2

Sorry, for making all of you run around writing fancy codes.

I assume you want to get an arbitrary number of arguments for a function. You can use the special arguments variable that comes in every called function. It's an array-like object that contains each argument passed into the function, in the order you placed them in the call.

You can do it like this :

function someFunction() {
  for(var i = 0; i < arguments.length; i++){
    document.getElementById(arguments[i]).style.someproperty = 'something'
  }
}

However, classes might be better for this case, assuming you don't mind attaching classes to the target elements.

Give every your div a class name, for example "yourClass". Now you will have a function like this:

function someFunction(divClass) {
    var eles = document.getElementsByClassName(divClass); 
    eles.style.someproperty = 'something';
    eles.style.someproperty = 'something';
    for(var i = 0; i< eles.length; i++){
       // do some thing with each element
        eles[i].style.someproperty = 'something';
    }
}

Make the parameter an array and loop through it.

function someFunction(divIDs)
{
    for (var i = 0; i < divs.length; i++)
    {
        document.getElementById(divIDs[i]).style.someProperty = 'something';
    }
}

What you want to do is give all the elements you want to do something with a class which is the same for all of them, and an ID which is unique to all of them.

function someFunction(e) {
  var action = false;
  switch(e.target.id) {
  case 'someid': 
    action = 'something';
    break;
  case 'someotherid': 
    action = 'somethingelse';
    break;
  case default:
    break;
  }
  if(!action) return;
  document.getElementById(e.target.id).style.someProperty = action;
}

You would then assign the onclick handler to the class:

onClick = "someFunction('theClassName')

If you have more than one element which you want to do the same thing to, instead of using an id, you would add a second class to those elements and just change the function to look for that class.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM