jQuery .attr malfunctioning, retrieving incorrect links

I'm currently in the process of working on this page for a project

$(function() {
    $(".modal-launcher, #modal-background").click(function() {
        $(".modal-content, #modal-background").toggleClass("active");
        $(".vid-1i").attr("src", "link1");
        $(".vid-2i").attr("src", "link2");
        $(".vid-3i").attr("src", "link3");
        $(".vid-4i").attr("src", "link4");
        $(".vid-5i").attr("src", "link5");
        $(".vid-6i").attr("src", "link6");
        $(".vid-7i").attr("src", "link7");
        $(".vid-8i").attr("src", "link8");
       //$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
    });
});

Just a quick note that the actual links have been replaced above for demonstration purposes.

I'm trying to create my own video popup launcher using jQuery on this page. However, I'm facing difficulties in using jQuery to change the "src" attribute of an iframe element to a YouTube link. I can't seem to figure out what's wrong with the jQuery code. I acknowledge that the problem lies in my code rather than the functionality of jQuery, and I'm seeking help to identify my error or make necessary modifications for it to work.

Interestingly, the last video in the list provided by jQuery always gets fetched.

Please note that the images may not appear on the page as they are local files and not hosted online. Clicking above the captions resembling "Match One" will still yield the "expected" outcome, regardless of the image display.

javascriptjqueryhtmlcss

Answer №1

Upon revisiting this issue and gaining a deeper understanding of JavaScript and jQuery, I realized that my problem stemmed from a simple misunderstanding of the code. It became clear that using one function per link would be a more suitable approach for achieving the desired outcome.

function playVideo1()
{
    $("#popup, #modal-background").toggleClass("active");
    $("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
    document.getElementById('scroll').style.cssText ='overflow:hidden';
}

The corresponding HTML snippet would be as follows:

<div onclick="playVideo1()"></div>

Previously, the code would execute each line, ultimately setting the last link as the source of the element. With the new code implementation, each button is now independent, ensuring that only one link is associated with each button.

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

In Angular JS pagination, the previous filter value is stored in $LocalStorage for future reference

One view displays all order records in a tabular format with 10 records per page. A filter is set to show only paid orders, which pops up filtered data when selected. An issue arises when closing the pop-up window and navigating to the next page of the t ...

javascriptangularjsfilterpagination

Utilizing fancybox in response to a page refresh

Yesterday, I started using the fancybox plugin for my C# asp.net web development project and successfully implemented it to show hidden panels and images. Today, I encountered a different scenario where I needed to use fancybox after a postback. I have d ...

jqueryasp.netfancybox

Understanding how to deduce parameter types in TypeScript

How can I infer the parameter type? I am working on creating a state management library that is similar to Redux, but I am having trouble defining types for it. Here is the prototype: interface IModel<S, A> { state: S action: IActions<S, A&g ...

javascriptreactjstypescripttypescript-genericsreact-typescript

What could be causing Jest to prevent me from using the node testing environment, especially when they have made changes to it?

I am currently working on testing a React component within Next.js using Jest. Jest made an official announcement regarding the change of default test environment to Node: Due to this update, the default test environment has been switched from "jsd ...

javascriptnode.jsunit-testingjestjsnext.js

Sift through JavaScript problems

My goal is to implement a filtering function on my input that will display a different result. However, I have encountered an issue where the this.data.stationInfo.stations array is being changed, as shown in the console.log output. According to the Mozil ...

javascriptvue.jsthisnativescript-vue

There was a serious issue: The mark-compacts were not working effectively near the heap limit, resulting in allocation failure - the JavaScript heap ran out of memory during the

I recently set up a t2.micro server on AWS and encountered an issue when running our application with the command "sudo npm start". The error message I received was: "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript he ...

javascriptnode.jstypescriptnpmamazon-ec2

Using Jquery to duplicate a row from one table and insert it into another table

Recently, I've dived into the world of jQuery and JavaScript with the goal of creating a simple app. The main functionality I'm trying to implement is the ability to copy a row from one table to another and then delete the original row when a but ...

javascriptjqueryhtml

Utilizing a Custom Hook for Updating Components in useEffect

I am facing an issue with the following code snippet: function checklogin(callback) { if (!state.user.authenticated) pushhistory("/accounts/login", function(){teamhome2_message();}); else callback(); } // TRYING TO CONVERT IT INTO ...

javascriptreactjs

Using the MongoDB aggregate framework to determine the total employee count per unique state

I'm currently working on displaying the total number of employees for each state within companies located in the USA. I aim to showcase this information for all states included in the dataset using sample numbers as a reference: AZ : 1234 CA : 30000 ...

javascriptmongodbaggregation-framework

Utilize mouseover to rotate the camera in three.js

Is it possible to utilize Three.js to rotate a camera and view an object from all angles upon hovering with the mouse? ...

javascriptthree.js3dcamera

Server Sent Events not being received by client from Express.js server

My Next.js (React) client is set up to receive Server-Sent Events from my Node.js/Express.js server, but it seems like it's not receiving any messages for some unknown reason. While the open and error events of EventSource are functioning correctly, ...

javascriptnode.jsreactjsexpressserver-sent-events

What is the reason for setTimeout not functioning properly with an AJAX request?

I have a jQuery function that I'm trying to tweak: $(".milestone-in-tree").live({ mouseenter: function() { setTimeout( $.ajax({ type: "GET", url:"/projects/pmnodes/" + $(this).data("pmnode") + "/addbuttons. ...

jqueryajaxwait

Exploring the functionalities of Node Express 3x with socket IO through testing

I attempted to integrate socket IO into my project, but unfortunately, I couldn't get it to work properly. This is my app.js: /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); va ...

javascriptnode.jsexpresssocket.io

Central peak in an expansive sphere

I'm attempting to mimic the design shown in this visual representation: While I am familiar with how to generate a semi-circle using CSS, my goal is to only create the top central segment of a larger circle. Specifically, I am seeking the CSS code n ...

css

Learning how to implement the selection tag to upload data to a SQL database using PHP

As a coding beginner, I've been tackling a project involving data insertion into an SQL server with PHP. My current struggle lies in the process of inserting data and capturing select tag objects as variables. I keep encountering Undefined Index error ...

phphtmlsqlwampserver

The reason why React.js does not automatically bind its functions to the "this" object

I cannot understand the purpose of a function not being bound by this object. In my opinion, all functions should be bound by 'this'. So why doesn't Reactjs automatically set bind(this) by default? For instance, in the code below, if I didn& ...

javascriptreactjs

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

javascripthtmlcss

Unlock the Power of Sockets in JavaScript and HTML

How can I work with sockets in JavaScript and HTML? Could HTML5 features be helpful? Are there any recommended libraries, tutorials, or blog articles on this topic? ...

javascripthtmlwebsocket

Navigating from an HTML form to a PHP page using a URL link

I have gone through numerous submissions but haven't found a clear answer to my specific question. I've successfully filled out an HTML form that sends data to a MySQL database. The data is then displayed in an HTML table using PHP. I'm tr ...

phphtmlmysqlurlhyperlink

Images in Angular Firebase causing scroll problems in Chrome

In regard to Angular 6, a common issue arises with slow image loading specifically in Chrome, not other browsers. The project utilizes Firebase and the snapshotchange method to fetch images for the Angular project. Image URLs used are like this: . The iss ...

htmlangulartypescriptfirebasegoogle-chrome