How do I display images from different links with option tag by their name?

Question

0.00/5 (No votes)

See more:

, +

I am trying to display a specific image from different types of links using a dropdown option.

What I want to do:
I have six different types of links. These links needs to be added into a dropdown option. After the desired Option (category) is chosen from a dropdown, a Textbox will appear. In the textbox I want to write specific image name. For example 1,2,3,4,5,6,7,8, etc... then the desired image will be displayed below one at a time.

Category-3 has Image folder instead of an image, so I was thinking maybe something like this, but still haven't been able to create a function to do this.

JavaScript

let folder = 'images';
if (selectType == 3) folder = 'Images';
'data-src',
`www.example.com/Category+${selectType}/${folder}/${val}.png`

www.example.com/Category-3/Images/8.png
www.example.com/Category-4/images/3.png
www.example.com/Category-5/images/5.png
www.example.com/Category-6/images/4.png
www.example.com/Category-7/images/7.png
www.example.com/Category-8/images/11.png

I need a some sort of JavaScript function to do this. I did some research and still haven't figured it out.

If it's possible to create some type of function that performs the above I would really appreciate that.

The code below displays images from only the chosen URL and images keep appearing one after another (stacking). I need to display one image at a time for example when displaying 2.png but when changing 2.png to 5.png then 2.png will be replaced by 5.png.

Thank you for reading!

What I have tried:

HTML

<html>
<body>
<div class="col-md-4"><br>
  <span>Please Choose desired Category</span>
  <select class="SelectType">
    <option value="3">Category-3</option>
    <option value="4">Category-4</option>
    <option value="5">Category-5</option>
    <option value="6">Category-6</option>
    <option value="7">Category-7</option>
    <option value="8">Category-8</option>
  </select>
</div>
<form>
   Image ID: <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
</form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var val = document.getElementById('imagename').value,
                src = 'www.example.com/Category-3/Images/' + val +'.png',
                img = document.createElement('img');
                img.src = src;
				img.setAttribute('width', '190px');
				img.setAttribute('height', '190px');
                document.body.appendChild(img);
        }
    </script>
</body>
</html>

Posted 2-Feb-22 20:18pm

PuppyDude

Updated 3-Feb-22 10:43am

Sean Ewington

v9

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2022-02-02T23:14:00

Solution 1

I think you've got most of the work done there, you just seem to be missing the part of the logic where you get the value from the select box which you can do using the following:

JavaScript

# HTML
<select id="image-category">
 <option>...</option>
</select>

# JS
const select = document.getElementById('image-category');
const option = select.options[select.selectedIndex];
const val = document.getElementById('imagename').value;
const images = option.value == '8' ? 'Images' : 'images';

const path = `www.example.com/Category-${option.value}/${images}/{$val}.png`;

Posted 2-Feb-22 23:14pm

Chris Copeland

Comments

PuppyDude 3-Feb-22 5:30am

Hello! thanks for replying! Could you please elaborate little bit? How do I insert script you wrote above? Could you make it full script I couldn't seem to be able to write it I'm kind of learning JavaScript newbie here.

Chris Copeland 3-Feb-22 6:05am

I've created a JS Fiddle and added some comments in there to describe the process.

Essentially we get a reference to the <select> element, then get the selected option and we can use that option to build the URL.

PuppyDude 3-Feb-22 6:23am

Wow! Thanks mate!

How do I display images from different links with option tag by their name?

1 solution

Solution 1

Add your solution here

Preview 0

How do I display images from different links with option tag by their name?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us