Properly Escaping Quotes When Inserting a Variable into a Link with Multiple Quotes

Currently, I am in the process of setting up a link to Adobe's Aviary web app, and it requires input in a specific format:

<a href="#" onclick="return launchEditor('editableimage1', 
'http://www.mywebsite.com/IMAGE.jpg');">Edit!</a>

In order to make this dynamic, I need to replace 'IMAGE.jpg' with a variable name. However, my attempt at coding this has not been successful. I am new to Javascript so any guidance would be greatly appreciated. Here is what I have tried:

<script>
var imgNamePassed = sessionStorage.getItem('imgName');
console.log("imgName", imgNamePassed);
</script>

<a href='#' onclick="return launchEditor('editableimage1','http://www.mywebsite.com/' + imgNamePassed);">LINK TEXT</a>

Answer №1

Modify it to:

<a href='#' onclick="return launchEditor('editableimage1','http://www.mywebsite.com/' + imgNamePassed);"/>LINK TEXT</a>

For example, visit this JSFiddle link.

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

Executing background operations in Meteor.js

Let me lay out my situation: 1. Extracting data from example.com at regular intervals 2. Storing it in a Mongodb database 3. Subscribing to this data in a Meteor App. Since I'm still learning Meteor, here's my plan: 1. Develop a scraper script ...

What is the method to determine the overall size of a webpage using the Google PageSpeed API?

"analytics": { "cssResponseBytes": "333 kB", "htmlResponseBytes": "269 kB", "imageResponseBytes": "3.35 MB", "javascriptResponseBytes": "2.29 MB", "numberCssResources": 2, "numberHosts": 80, "numberJsResources": 72, "numberR ...

Nextjs version 13 encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

I am currently utilizing the latest version 13.1.0. I have implemented a ContextProvider that allows switching between light and dark themes. 'use client'; import { Theme, ThemeContext } from '@store/theme'; import { ReactNode, useState ...

There seems to be an issue with JavaScript functionality when implementing Bootstrap 5.3

Struggling with building a website on Visual Studio Code using Bootstrap 5.3. The functions like buttons not expanding and carousel not rolling are not working. Being a beginner, I'm finding it hard to understand why :( Has anyone encountered this is ...

JQuery AJAX not retrieving data after $.post request

I am currently facing a challenge with a specific JQuery $.post request to a PHP-based processor. To troubleshoot, I set up a test page containing the following code: It's important to note that this is hosted on a subdomain, but there are no cross-d ...

"Learn how to capture the complete URL and seamlessly transfer it to another JavaScript page using Node.js and Express.js

Is there a way to access the token variable in another page (api.js)? I need to use it in my index.js. var express = require('express'); var router = express.Router(); router.get('/', function(req, res ...

Dealing with req.params.url that includes "://": Best practices

Currently, I am in the process of developing a program utilizing ExpressJS. One of the key features is that the user should have the ability to submit a URL. However, I am encountering a challenge. It seems that the system is not functioning correctly beca ...

Disabling the Enter key to submit an AJAX form is causing the focus to not move to the next input field

I've encountered a small issue that I can't seem to find a solution for (maybe my keyword search wasn't effective): The scenario: I have successfully prevented a form from being submitted when hitting the Enter key (13). It's importan ...

What is the best way to utilize RxJs with jQuery's ajax function?

Here is how I've set it up: Rx.Observable.fromPromise($.ajax({ url: url + postal_value + '&types=(regions)&location=51.509865,-0.118092&key=' + key, type: "GET", datatype: "json" })); However, the aj ...

What is the process for inserting text or letters into a checkbox using Material Ui?

I am looking to create circular check boxes with text inside them similar to the image provided. Any help or guidance on achieving this would be greatly appreciated. View the image here ...

What is the best way to trigger a function in a component after a value in the store has

I own a shop that contains various values and two key components. The first component is a range slider, while the second component requires a function to be called after the red value is changed. In the initial component, I update the slider value and st ...

The Bootstrap 4 tooltip is failing to display correctly and is only functional for anchor tags

Utilizing bootstrap 4, I aim to display tooltips on both buttons and anchor tags. However, the tooltips only appear on anchor tags and not on buttons. Furthermore, even when the tooltip does display, it lacks proper styling and appears white without adheri ...

Comparing DOM Manipulation and Templating

Currently in the process of enhancing the performance of my HTML5 phonegap application, I am faced with the challenge of efficiently managing a <ul> element that is frequently updated. For the initial injection of database data, I am utilizing Docum ...

What steps can be taken to ensure a neutral value is returned in Mongodb aggregation when the specified attribute does not exist?

I need to create an aggregation that looks like this: Game.aggregate([{ $match: { "_id": { "$in": result.games } } ...

Error encountered during NextJS build - file or directory not found for 500.html

I recently made the switch from Page Router to App router. Transitioning pages - 500.tsx to app - 500 - page.tsx However, I encountered an error when running yarn build/next build: > Build error occurred [Error: ENOENT: no such file or direc ...

Parsing JSON data received through a URL using Ruby

When attempting to send a JSON object from JavaScript to Ruby, I am encountering issues with parsing it in Ruby. Despite trying various methods and conducting extensive research, I have not been able to find a solution. It is important to note that I am r ...

Retrieve text content from a specified element on a different page, not the one currently loaded, by

After implementing this dynamic content script, I realized that it is working well for the current page. However, since I cannot access the code-behind in the asp.net project, I am facing an issue when trying to fetch the text from "div.sampleheading" on t ...

What is the correct way to position a material-ui icon within a button for proper alignment?

Is there a way to properly align the <ChevronRightIcon> within the <PrimaryButton>? I want it to appear after the button label on the right side. https://i.stack.imgur.com/dcEWo.png <PrimaryButton style={{ paddingRight: &apo ...

Looping through dates in a POST request using JavaScript/GAS - What's the best approach?

My task involves posting timesheet entries for the upcoming month into a system using an API. In order to do this, I require the following: User ID Assignable ID Dates (in the format YYYY-MMM-DD) Hours Initially, I obtained the user_id and assignable_id ...

Using SWR, retrieve data in client components consistently for each request in a Next.js version 13.3 environment

I recently upgraded to Next.js 13.3 with the app dir set up. I have a simple component that displays the current date. However, it only updates the date once and then doesn't update again until I rebuild the app. In Next.js 12, the date would update w ...