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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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!