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!
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>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices