How to add a javascript variable to javascript src. Using Jquery

Question

To sum up, I have a variable (hiragana path), that is responsible of helding the path of each image. The main issue is that the path of each image depends on the random imagel label. That's why I cannot just type in every path. The solution to this is assigning a variable (hiragana path). But at the time of putting it to work, in Jquery I could not put a variable in the src. Any Help?

'''

    var hiragana_img

    var hiragana_letter

    var hiragana_all= ['a','i','e','o','u']

    var hiragana_list = {"vowels_list": ['a','i','e','o','u'],

    "ka_list": ['ka','ki','ke','ko','ku']
    };





    function random_hiragana(hiragana_letter, hiragana_all){

        hiragana_letter = hiragana_all.random();

        var hiragana_path = "../../proyect_images/hiragana_v/" + hiragana_letter + ".png"



        $('#core').append("<img id='hiragana_img' src='hiragana_path'/>")
        return true;

''''

You have to concatenate the variable in the string ... src='" + hiragana_path + "' — charlietfl
– charlietfl, Commented Jun 3, 2021 at 0:59
hiragana_all.random(); looks fishy. Arrays don't have a random() method — charlietfl
– charlietfl, Commented Jun 3, 2021 at 1:02

zer00ne · Accepted Answer · 2021-06-03 02:50:32Z

There are a few issues with OP's code:

End each line with a semi-colon ;
hiragana_letter is declared then defined after being passed through the function.
hiragana_list is defined then never used.
The method .random() cannot be suffixed to an array.
When concatenating literal strings you must
1. use either single or double quotes to wrap the entire string.
2. use the opposite quotes to wrap anything within the string.
3. use the same type of quotes in step 5.1 and then the plus character + to wrap any variable inserted into a string.
```
var path = "https://domainName.dot/img.png";  
var htmlString = "<img src='"+path+"'>";
```

The demo below will:

pass an array of strings vowels
generate a random index number in the range of 0 to 4 random
```
var random = Math.floor((Math.random() * 5));
```
apply both to get a string vowels[random]
```
vowels[2] = 'e'
```
insert the string into a string representing a url path
```
var path = "../../proyect_images/hiragana_v/k" + vowels[random] + ".png"

"../../proyect_images/hiragana_v/ke.png"
```
Note: "k" was prefixed to the image file name because I noticed that the unused object hiragana_list had an array of vowels prefixed with a "k". BTW arrays are not keyed with strings like: "vowels_list": or "ka_list": in JavaScript.
Appends htmlString to .core (try to use class if you are using jQuery, id will just limit your code unless you are dealing with form controls.)
returns the path so it can be checked in the console. 99% of the time if a function isn't returning a value, it's returning false

var vowels = ['a', 'i', 'e', 'o', 'u'];

function hiragana(vowels) {
  var random = Math.floor((Math.random() * 5));
  var path = "../../proyect_images/hiragana_v/k" + vowels[random] + ".png"
  $('.core').append("<img src='" + path + "'>");
  return path;
};

console.log(hiragana(vowels));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class='core'></section>

Mostafa Ehab · Accepted Answer · 2021-06-03 02:52:44Z

0

First: I think arrays don't have random() method to get a random value from hiragana_all try:

hiragana_letter = hiragana_all[Math.floor(Math.random() * hiragana_all.length)];

Second: to use hiragana_path as a varaible use + character to concatenate

function random_hiragana(hiragana_letter, hiragana_all) {
    hiragana_letter = hiragana_all[Math.floor(Math.random() * hiragana_all.length)];

    var hiragana_path = "../../proyect_images/hiragana_v/" + hiragana_letter + ".png"
    $('#core').append("<img id='hiragana_img' src='" + hiragana_path + "'/>")

    return true;
}

answered Jun 3, 2021 at 2:52

Mostafa Ehab

412 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to add a javascript variable to javascript src. Using Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related