i need to make this script smaller and more efficient.
iv got a problem i need to make this script smaller.
but first here is what I am trying to do.
I am trying to change multiple div and span tags with one button. the script iv got works but i need to make it smaller so its easier to add on to and change.
please do bare in mind im no programming master so please keep it relatively simple.
... the script iv got works but i need to make it smaller so its easier to add on to and change.
With this, all you'll need to change is the values of the element id's in classNamesA for the elements whose class names you want to change. If the element exists, then a '2' is appended to the id and assigned to the class for the element
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var classNamesA = ['nav','main','sideright','sideleft']; //edit class names to suit
function changeClassNames(){
for(i=0; i < classNamesA.length; i++){
if(document.getElementById(classNamesA[i])){
document.getElementById(classNamesA[i]).className = classNamesA[i]+'2';
}
}
}
</script>
</head>
<body>
<div>
<button onclick="changeClassNames();">Change class names</button>
</div>
</body>
</html>
With this, all you'll need to change is the values of the element id's in classNamesA for the elements whose class names you want to change. If the element exists, then a '2' is appended to the id and assigned to the class for the element
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var classNamesA = ['nav','main','sideright','sideleft']; //edit class names to suit
function changeClassNames(){
for(i=0; i < classNamesA.length; i++){
if(document.getElementById(classNamesA[i])){
document.getElementById(classNamesA[i]).className = classNamesA[i]+'2';
}
}
}
</script>
</head>
<body>
<div>
<button onclick="changeClassNames();">Change class names</button>
</div>
</body>
</html>
Which is the same thing I recommended way back in post #2.
but you did it by calling the function for each element ID, which imo is a "poor man's" way of doing things. If I submitted the way you did it in a class assignment it would have been marked down
Imo it's better just to call the function once and then loop through the element ID's in an array and process them accordingly
The goal of 'mavricar's original request was to make the script smaller.
I reduced it to two lines of code.
I used his initialization code with the ID and Classname values assumed to be equal
because he did not provide all of the code for testing.
It does check all the ID's listed in the onclick setting, which you would need to
edit your array a bit more to get all of the elements.
I would have created a collection of the elements and avoided the ID value altogether.
But that was not a choice as mavicar's code was incomplete.
I'll let him decide which is easier to use and manage, should he/she ever return to comment.
Reply With Quote
Something to try ...
Originally Posted by mavricar
Bookmarks