Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this:

function go() {
if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src ))

......
......
.....
}

This function is triggered when three different images on the page are equal to each other. However, I want to be able to specify which exact images need to be equal in order for the function to run. Instead of any combination of the three images being equal, I want to set unique conditions for each image.

For example, if one image is labeled as 'x', I only want the function to run and display a certain message when all three test1, test2, and test3 have the value 'x'. Similarly, I want separate messages to be displayed based on the values of the images.

javascriptcssswitch-statement

Answer №1

To determine which image it is (whether 'x', 'y', etc.) inside the if statement, you can use a switch/case block. It's not important which image's src you verify because you've already confirmed that they are all the same.

For example:

if((document.test.picture1.src == document.test.picture2.src && document.test.picture2.src == document.test.picture3.src ))
    switch (document.test.picture1.src) {
        case "x":
            // Perform certain actions
            break;
        case "y":
            // Carry out different actions
            break;
    }

Answer №2

It seems like the solution lies in incorporating a switch statement into your code. Here's an example:

switch (document.test.test1.src) {
      case 'y':
        // Run code if src equals 'y'
        break;
      case 'x':
        // Run code if src equals 'x'
        break;
}

The placeholders "........" denote the specific actions you want to take when the condition matches either 'y' or 'x'.

Answer №3

To improve efficiency, I recommend creating a separate function for image comparison. This function should take the current image element as a parameter and be used with different image objects:

function compareImages(imgElem){
  if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src ))
    console.log(imgElem.id,"triggered");
    // or do something else
}

compareImages(document.test.test1);
compareImages(document.test.test2);
compareImages(document.test.test3);

However, depending on the number of elements you are comparing, this solution may not be accurate. For a large number of elements, consider using a map.

Answer №4

Implementing this will be a breeze

let sourceA = document.test.test1.src;
let sourceB = document.test.test2.src;
let sourceC = document.test.test3.src;

let functions = {
    x: function() { alert(messageX); },
    y: function() { alert(messageY); },
    z: function() { alert(messageZ);}
};

if(sourceA == sourceB && sourceB == sourceC) {
    if(functions.hasOwnProperty(sourceA)) {
        functions[sourceA](); //you can also use 'sourceB' or 'sourceC' since they're all equal 
    }
}

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

What could be causing the issue with my Angular integration with Jira Issue Collector to not function properly?

Looking to link the Jira issue collector with an Angular application I attempted something along the lines of Component.ts import { Component, OnInit } from '@angular/core'; import * as jQuery from 'jquery'; declare global { inter ...

javascripthtmlangularjiraintegration

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

Can someone please provide guidance on creating a custom pipe in Angular 8 that converts seconds to hours and minutes? Thank you. <div class="col-2" *ngFor="let movie of moviesList"> <div class="movie"> {{ movie.attributes.title }} ...

javascriptangulartypescriptpipe

Showcasing the information stored within my li element, I am able to access and view the data through my console

I want to showcase the data in the browser Upon hitting the api call, I retrieve the data in my console. The challenge lies in displaying the data within my li tag. Below are snippets of my relevant code and the entire code can be found in the gist links p ...

javascripthtmlangularangular2-templateangular6

Choosing the Angular5 model

I'm currently working with an Angular5 project that has a <select> element bound to an array of customers. Here's the code snippet: <select class="form-control" [ngModel]="record.customer_id" (ngModelChange)="setCustomer($event)" name=" ...

javascripthtmlangular

Reorganizing objects upon insertion in Mongo DB

I am encountering an issue in my Node.js app where MongoDB is causing objects to be reordered when inserting new records into the database. I am using the following insert method: collection.insert(object, {safe:true}, function(err, result) { if (err) ...

javascriptnode.jsmongodbexpress

Do you have any recommendations for a jQuery plugin that can create a sleek horizontal scrolling image gallery?

Recently, I came across the Smooth div scroll plugin developed by Thomas Kahn, and it fits my requirements perfectly. However, I have encountered a bug that seems to be persisting. The issue arises when both mousewheel scroll and touch scroll are enabled s ...

javascriptjqueryscrollhorizontal-scrollingsmooth-scrolling

The Gulp task is stuck in an endless cycle

I've set up a gulp task to copy all HTML files from a source folder to a destination folder. HTML Gulp Task var gulp = require('gulp'); module.exports = function() { return gulp.src('./client2/angularts/**/*.html') .pipe( ...

javascriptnode.jstypescriptgulpgulp-watch

Why is it not possible to declare an interface or type within a TypeScript class?

I am struggling to define interface | type within a TypeScript class. Here is the code snippet: class MyClass { interface IClass { name: string, id: string } } However, I keep encountering this error: Unexpected token. A constructo ...

javascripttypescriptoopoverridingtsc

Map image showing only the tile layer in the top corner

My current project involves utilizing Ionic 5 and Vue.js. One of the screens in my project features a leaflet map that needs to cover most of the screen space. To implement this, I have integrated the Leaflet library for vue into my code. Here is a snippe ...

javascriptvue.jsionic-frameworkleaflet

When should we utilize the React.Children API in React applications?

Exploring the potential use cases of the React.Children API. The documentation is a bit confusing for me (Using React v.15.2.0). https://facebook.github.io/react/docs/top-level-api.html#react.children According to the documentation, this.props.children ...

javascriptreactjs

Display multiple values in a select dropdown using Bootstrap 5 properties

I am stuck with the following code<hr> HTML <select id="select" placeholder="Choose Select" class="selectpicker" multiple></select> <div class="container"> <div id="all" clas ...

javascripthtmlbootstrap-5bootstrap-selectbootstrap-selectpicker

Incorporating a javascript library or plugin into Vue.js code

Hey there, I recently came across the really cool component called vue-social-sharing. It's my first time using a library like this and I'm a bit confused on how to set it up properly. I've installed it through NPM, but when it comes to the ...

javascriptvue.jsvuejs2vue-component

AngularJS - Refreshing Controller when Route Changes

Scenario app.controller('headerController', ['$scope', '$routeParams', function($scope, $routeParams) { $scope.data = $routeParams; }]); app.config(['$routeProvider', function ($routeProvider) { ...

javascriptangularjssingle-page-application

After two HTML injections, Javascript ceases to function properly

I am in the process of developing a chat feature for my website. The layout includes a conversation section on the left and a list of users on the right. When a user's div is clicked, their ID is transmitted to the Django back end. Subsequently, full ...

javascriptjqueryajaxdjango

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

htmlcss

The base64 code generated by the toDataURL method on the canvas appears to be incorrect

I am facing an issue with my code while using canvas to draw a cropped image with base 64. The problem is that it works perfectly on Chrome but gives me a blank image on Firefox. async function base64SquareCrop(imgbase64, size = 224) { const img = docume ...

javascripthtml

Ways to troubleshoot and verify values in PHP that are sent through AJAX

In my jQuery function, I am using AJAX to send values to a PHP file: $.ajax({ //make ajax request to cart_process.php url: "cart_process.php", type: "POST", dataType: "json", //expect json value from server data: { quantity: iqty, ...

javascriptphpjqueryajaxjson

Add the word "String" in front of the moment timestamp

In my project, I have used React along with Material UI to show the message Running check... when the clicked state is set to true. If it's not true, then I am displaying a timestamp by utilizing the react-moment library. <Typography gutterBottom ...

javascriptreactjsmaterial-uimomentjs

The NGX countdown timer is experiencing a discrepancy when the 'leftTime' parameter exceeds 24 hours, causing it to not count down accurately

When the leftTime configuration exceeds 864000, the timer does not start from a value greater than 24 hours. <countdown [config]="{leftTime: `864000`}"></countdown> For example: 1. When leftTime is set to `864000`, the Timer counts down from ...

javascriptangularnpmcountdown

Eliminate an array from another array if a specific value is present in an object

I've been struggling with removing an entire array if it contains an object with a certain value within. I've searched high and low, but haven't been able to find a solution that fits my specific problem. In my data structure, I have arrays ...

javascriptarraysobjectlodash