Code fails to function with images

Why is it not functioning properly? I would like to be able to click on next.jpg and have 2.png disappear while 1.png appears.

<html> 
<head> 
<script type="text/javascript"> 
function next(id) 
{ 
    var currentImg = document.getElementById('c' + id).style; 
    currentImg.display = 'none'; 
    id++; 
    var newImg = document.getElementById('c' + id).style; 
    newImg.display = 'inline'; 
    } 
} 
</script> 
</head> 
<body> 
<img src="next.jpg" onclick="next(1)" > 

<img id="c1" border="0" style="display: inline" src="2.png" usemap="#map2"> 
<img id ="c2" border="0" style="display: none" src="1.png" usemap="#map1"> 

........

UPDATE: Proper indentation of your code could help identify the error.

javascript

Answer №1

To fix the issue, simply delete any extra } and verify that it is functioning correctly

function update(id) {

var current = document.getElementById('c' + id).style; 
current.display = 'none'; 
id++; 
var nextElement = document.getElementById('c' + id).style; 
nextElement.display = 'inline'; 
}

Answer №2

function proceed(identifier) 
{ 
var deactivate = document.getElementById('d' + identifier).style; 
deactivate.display = 'none'; 
identifier++; 
var activate = document.getElementById('c' + identifier).style; 
activate.display = 'inline'; 
}

Please eliminate any additional closing curly braces at the end of the function.

Answer №3

There is an extra } at the conclusion of your script. I created a JSFiddle to help.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML Action Identifier using the GET method

There is a possibility that this question may be a duplicate, but I am unable to locate the original. Within my form, there is an action: <form id="bug-form" action="/AST_14/Bugg.ly2/index.php/bug/update/" method="post"> The process in my system i ...

javascriptphpjqueryhtmlyii

software tool for managing state transitions

Can anyone recommend a superior javascript library for workflows? Right now, I'm utilizing Joint JS, but I require something with a more visually appealing interface (users tend to prefer that). ...

javascriptflowchart

JSON to Table Conversion

On the hunt for a php script that can load CSV files? Look no further than this snippet: echo json_encode(file(csvfile.csv, FILE_IGNORE_NEW_LINES)); Check out the output: ["foo,bar,baz","foo, foo,bar","bla,bla,blubb"] Need to integrate this into your ...

phpjavascriptjqueryjson

Animate the parent container of ng-view in Angular by targeting an element within ng-view

Are you able to use CSS animations to animate a div's background color that is located outside of the ng-view, while using a directive on a $state within the ng-view? The ng-view already has CSS animations for routing. When I try to add animation cl ...

javascriptangularjsangularjs-directiveangular-ui-routercss-animations

How can I showcase a Google donut chart using an array of data in a React application?

I have created a doughnut chart that is supposed to take an array as data. However, when I input the array, nothing shows up on the chart. How can I create a chart with array data? sum.js ... const arr = []; arr.push({ key: capitalizeEachFirst ...

javascriptreactjs

Incorporating an offset with the I18nPluralPipe

Having trouble with my multiselect dropdown and the text pluralization. I attempted to use the I18nPluralPipe, but can't seem to set an offset of 1. ListItem = [Lion, Tiger, Cat, Fox] Select 1 Item(Tiger) = "Tiger", Select 3 Item(Tiger, Cat, Fox) = ...

javascriptangulartypescriptangular-pipe

What is the best way to incorporate plugins designed for various jQuery versions onto a single webpage?

I have integrated three jQuery scripts into an HTML page, including a Colorbox plugin for the gallery, a popup plugin for a reservation form, and a sliding jQuery script for the footer. However, I am facing issues where either the close button on the pop ...

javascriptjquery

Vue - Impact on child reactivity when passing props from parent based on stateful dependencies

Currently, I have a situation in my code where I am able to successfully delete an 'exercise' object from the state. However, the deletion does not reflect on the component itself. The parent component receives data from the state and passes the ...

javascriptvue.jsvue-componentstatevuex

"Press this button to empty the input fields and clear the text in the textarea

Is there a way to implement a button that clears/deletes the content of all textareas on a form? I've attempted using the following code: <input type="reset" value="restart" /> However, since the textareas are populated with data from the dat ...

c#javascriptjquery.netasp.net-mvc

Creating a unique HTML id using an evaluated expression

My goal was to create a minimalist version of the classic game "tic tac toe" using AngularJS. To achieve this, I had to come up with a unique solution by assigning each button a distinct ID (f+i). HTML <table> <tr ng-repeat="f in [5,10,15]"& ...

javascripthtmlangularjs

What could be causing the Socket.io client in React to trigger each event twice?

Currently, I am encountering an issue with Socket.io client in my Next.js app. The problem is that every time I trigger an event, the socket seems to run twice. Despite my efforts, I have not been able to find a solution to resolve this recurring problem. ...

javascriptreactjswebsocketnext.jssocket.io

Retrieving properties from a selector's output function

My situation is similar to the scenario described in the accessing react props in selectors documentation. However, in my case, let's assume that the visibilityFilter is coming from the props. Is there a way to achieve something like the following? e ...

javascriptreactjsreduxreact-redux

Stuck on loading screen with Angular 2 Testing App

Currently working on creating a test app for Angular 2, but encountering an issue where my application is continuously stuck on the "Loading..." screen. Below are the various files involved: app.component.ts: import {Component} from '@angular/core& ...

javascriptangularjsnode.jstypescriptangular

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

javascripthtmlangulartypescript

Issues with date clicking on FullCalendar in Angular

I'm currently using version 4.4.0 of the FullCalendar plugin, but I am facing an issue where the dayClick event is not being triggered in my code. Below is a snippet of my code: calendar.component.html <full-calendar defaultView="dayGridMonth ...

javascriptangularfullcalendarfullcalendar-4

Alter the configuration of a JSON object

I'm currently working on modifying the following JSON text. It has the structure as shown below: { "cabecera": { "tipo_cambio": "", "fecha_emision": "", "total": "" }, "detalle": { "940b130369614bd6b687dc5b41623439": { " ...

javascriptc#json

JavaScript global variables are experiencing issues with proper updates

I am facing an issue where I need lines to be stored in a global array. However, when I compare the values inside the function with those outside the function using console.log, I notice that the inside one works fine but the outside one remains empty. C ...

javascriptajax

How to serve HTML files during development using Create React App

When it comes to integrating a server (like Python or Java) with CRA, there are two main approaches: "CRA first" and "Other server first". With the CRA-first approach, the React server takes center stage. You can serve the React application using yarn sta ...

javascriptreactjscreate-react-app

Using multiple static asset directories in express

Utilizing express, I am aiming to serve static data to my application and manage requests to a protected API. Consider the following folder structure: root/ node_modules/ dist/ app/ server/ app.js // Main server file. src/ app/ ...

javascriptnode.jsexpress

What is the process for displaying user input on the console?

How can I ensure that the server is receiving user input? What steps should I take to print this input to the console? Currently, the console.log statement only displays "About to create new room", but I require the user input as well. Client-Side: // C ...

javascriptnode.jsconsole.log