Using a series of functions that make use of (theID)

Question

Using a series of functions that make use of (theID)

Hey there, I'm new to HTML and I've been trying to achieve something below. Unfortunately, it's crashing and I can't figure out if it's just a syntax error or if what I'm attempting isn't possible.

The function declaration:

<!-- Copyright 2005, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->

if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }

function close(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" } }

function open(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }

// -->

</script>
</head>

How to use the function:

<table>
<tbody>
<tr>
<td colspan="2" rowspan="0">
<div>•&nbsp;<a href="/tallwalls/" target="_blank"><b>Tall Walls Sizer</b></a></div>
<p onClick="open('a4'), close('a1','a2','a3')" style="cursor:hand; cursor:pointer">       
<span style="color: #808080;">[Click here for more information]</span></p>
</td>
</tr>
<tr id="a4" class="texter">
<td style="padding:0px;width:210px;"><a href="/tallwalls/" target="_blank" title="Tall Walls Sizer"><img src="/images/logos/tallWALLS.gif" alt="" width="206" height="41"/></a></td>
<td>
<div>DESCRIPTION</div>
</td>
</tr>
</tbody>
</table>

I'm not entirely sure about the onClick="open('a4'), close('a1','a2','a3')". Is this correct?

EDIT: Just to add that the other ids do follow the same pattern as well - x4

Thanks in advance,

SirKaydian

javascript html css

Answer 1

Answer №1

In JavaScript, remember that lines must end with a semicolon; for example, begin by using open('a4');

Additionally, be aware that the close() function only accepts one argument at a time, so you should separate multiple arguments like this:

close('a1'); close('a2'); close('a3');

If you're new to HTML and JavaScript, consider looking into jQuery for its user-friendly methods like hide() and show() which can simplify your tasks.

Answer 2

In JavaScript, remember that lines must end with a semicolon; for example, begin by using open('a4');

Additionally, be aware that the close() function only accepts one argument at a time, so you should separate multiple arguments like this:

close('a1'); close('a2'); close('a3');

If you're new to HTML and JavaScript, consider looking into jQuery for its user-friendly methods like hide() and show() which can simplify your tasks.

Answer 3

Answer №2

To enhance your code, remember to use semicolons to separate the function calls. You can refer to this relevant SO post on when to utilize semicolons.

<p onClick="open('a4');close('a1');close('a2');close('a3'); return false;"/>

Answer 4

To enhance your code, remember to use semicolons to separate the function calls. You can refer to this relevant SO post on when to utilize semicolons.

<p onClick="open('a4');close('a1');close('a2');close('a3'); return false;"/>

Answer 5

Answer №3

Let's review the approach in your close(theID) method:

function close(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" } }

This function is designed to accept only one argument, but you are attempting to use it with multiple arguments. To handle this scenario, you can modify the code as follows:

function close(){
   if(arguments.length > 0 ){
     for(var i=0; i<arguments.length; i++){
        closeMe(arguments[i]);
     }
   }
}

function closeMe(id){
 if (document.getElementById(theID).style.display == "block") {
    document.getElementById(theID).style.display = "none" 
 } 
}

Similarly, let's consider your open function.

You seem to be encountering issues with your onClick handler:

onClick="open('a4'), close('a1','a2','a3')"

To rectify this, update it to:

onClick ="open('a4'); close('a1', 'a2', 'a3');"

Answer 6

Let's review the approach in your close(theID) method:

function close(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" } }

This function is designed to accept only one argument, but you are attempting to use it with multiple arguments. To handle this scenario, you can modify the code as follows:

function close(){
   if(arguments.length > 0 ){
     for(var i=0; i<arguments.length; i++){
        closeMe(arguments[i]);
     }
   }
}

function closeMe(id){
 if (document.getElementById(theID).style.display == "block") {
    document.getElementById(theID).style.display = "none" 
 } 
}

Similarly, let's consider your open function.

You seem to be encountering issues with your onClick handler:

onClick="open('a4'), close('a1','a2','a3')"

To rectify this, update it to:

onClick ="open('a4'); close('a1', 'a2', 'a3');"

Using a series of functions that make use of (theID)

Answer №1

Answer №2

Answer №3

Similar questions

5 Bootstrap Form Validation: Improve Your Form Experience

Discovering the presence of line breaks

Exploring the world of AngularJS with nested JSON structures and utilizing ng-repeat

react dealing with clicking and blurring at the same time

Customizing a responsive background image within a div using Bootstrap 3

Vue-router and middleman combination displaying '404 Error' upon page refresh

What is the process for utilizing an external HTML file to transmit information through Mailgun?

Ways to retrieve the related file in Angular service files?

Tips on utilizing ajax to load context without needing to refresh the entire page

Adding a custom script with wp_enqueue_script() upon form submission: Steps and guidelines

What is the best way to trigger a controller action using jQuery in your application.js file?

What emerging patterns can be observed in the security of client-side coding within the realm of web development

Changing the style.backgroundImage property overrides any image transition effects

Tips on ensuring a div covers the entire page even when a scrollbar is present

What is the most effective method for retrieving Key-Value Pairs from a disorganized String?

Instructions on submitting a form containing multiple select lists using the enter key

Customizing ESLint configurations for a more productive local development environment

Execute Babel task individually for each file instead of running it on the entire directory, Grunt

What is the best way to determine if a Google Apps user is not an administrator?

What is the best way to identify when a cell has been modified in ng-grid aside from just relying on the ng-grid event