Change a part of html with a variable

Contributor ,
Dec 31, 2018 Dec 31, 2018

Copy link to clipboard

Copied

Hi,

I need to change with a variable the part "MyFolder2" in the following string:  

<img src="MyFolder1/MyFolder2/3.jpg" class="img-rounded img-responsive" alt="Placeholder image">

Is there e way?

Thanks!

Views

263

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Dec 31, 2018 Dec 31, 2018

How exactly do you want to change the folder name, on page-load, onclick, via a select menu??

Example below onclick with folder 'hard coded' as a variable, using jQuery:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Change Variable</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function(){

$(".changeFolder").click(function(){

const folder = "FolderXYZ";

$(".myImage").attr("src", "MyFolder1/" + folder + "/3.jpg");

});

});

</script>

<

...

Likes

Translate

Translate
LEGEND ,
Dec 31, 2018 Dec 31, 2018

Copy link to clipboard

Copied

How exactly do you want to change the folder name, on page-load, onclick, via a select menu??

Example below onclick with folder 'hard coded' as a variable, using jQuery:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Change Variable</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function(){

$(".changeFolder").click(function(){

const folder = "FolderXYZ";

$(".myImage").attr("src", "MyFolder1/" + folder + "/3.jpg");

});

});

</script>

</head>

<body>

<img src="MyFolder1/MyFolder2/3.jpg" class="myImage img-rounded img-responsive" alt="Placeholder image">

<button class="changeFolder">Change Folder</button>

</body>

</html>

If youre not using jQuery here's a vanilla javascript onclick function example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Change Variable</title>

</head>

<body>

<img src="MyFolder1/MyFolder2/3.jpg" class="myImage img-rounded img-responsive" alt="Placeholder image">

<button class="changeFolder">Change Folder</button>

<script>

const folderName = "FolderXYZ";

document.querySelector('.changeFolder').addEventListener('click', changeFolder);

function changeFolder() {

document.querySelector(".myImage").src = "MyFolder1/" + folderName + "/3.jpg";

}

</script>

</body>

</html>

Here's a 'select menu' example to change folder names using vue.js

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Change Variable</title>

<style>

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

</head>

<body>

<div class="app">

<img v-bind:src='folderName + "/3.jpg"' class="myImage">

<select v-model="folderName" v-on:change="changeFolder">

<option v-for="folder in folders" v-bind:value="folder.name" >{{ folder.name }}</option>

</select>

</div>

<!--end app-->

<script>

new Vue({

el: '.app',

data: {

folderName: 'MyFolder2',

folders: [

{name: 'MyFolder3'},

{name: 'MyFolder4'}

]

},

methods: {

changeFolder() {

folderName = this.folderName;

}

}

});

</script>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 01, 2019 Jan 01, 2019

Copy link to clipboard

Copied

LATEST

Thank you very much osgood!!!

A beautiful gift for me for the new year!!!

Happy new year also for you and all the dream weavers!!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines