Simple Javascript Image - javascript

`jQuery('#resultWorkingDays').html(numberWithCommas(resultWorkingDays) + ' days')`
Using above prints 'days' on the end of a string. I want to change 'days' to an image source. I've searched & tried a lot of different things but none seem to work.
Complete JS novice, help much appreciated

Just include the HTML.
jQuery('#resultWorkingDays').html(numberWithCommas(resultWorkingDays) + ' <img src="yourImage.jpg">');

jQuery("#resultWorkingDays").html(numberWithCommas(resultWorkingDays) + "<img src='\images\...\name.png />");

Related

need help to fix the link in my javascript code

can some one help me to fix this link in my javascript code
the code is
$('.frame_src').attr('src', 'https://www.youtube.com/embed/' + $(this).data('str'));
full link is https://www.youtube.com/embed/p9zdCra9gCE?&vq=hd720&rel=0;autoplay=1
i want to make it something like this i know it's wrong but i can't fix it
$('.frame_src').attr('src', 'https://www.youtube.com/embed/' '?&vq=hd720&rel=0;autoplay=1' + $(this).data('str'));
You're almost there, you need to insert the $(this).data('str') value in the right place.
Change
$('.frame_src').attr('src', 'https://www.youtube.com/embed/' '?&vq=hd720&rel=0;autoplay=1' + $(this).data('str'));
to
$('.frame_src').attr('src', 'https://www.youtube.com/embed/' + $(this).data('str') + '?&vq=hd720&rel=0;autoplay=1');

document.write (trouble with syntax adding a href)

I have been having trouble getting the correct string formatted for my document.write()function. Any help is greatly appreciated. Jsfiddle link below of what i have so far. Below is what I am trying to achieve.
jfiddle
<img style="height:100px;" src="https://web.fulcrumapp.com/api/v2/photos/+ myarray[i]+.jpg?token=3c04f586f4991a" />
Your Fiddle code is currently putting the link text inside the link tag itself. You should close the > before putting the link text ;)
Additionally, don't use document.write...
Thank you, Niet for the advice I am looking into how to do this another way, but for now I was able to figure out my syntax.
document.write("<li><img src=\"" + url + "" + myarray[i] + "\"></li>");

JavaScript variable as HTML link text

I am trying to something like this:
JS variable
I have seen multiple threads where someone is trying to do something similar but none of these solutions seem to be working for me. I am trying to pull data from an API and I would like to use a variable from the API as the text for the link. Right now I am using jquery to do this:
$('#tracktitle').append($("<a href='" + track.permalink_url + "' target='_blank'>Title</a><br>").html(track.title));
but would like to have the 'html(track.title)' in place of 'Title'
any help would be greatly appreciated
What about?
$('#tracktitle').append("<a href='" + track.permalink_url + "' target='_blank'>" + track.title +"</a><br>")
When you create a new element with jQuery you can pass just the tag as the first argument to $() and then pass an object with the various properties you want to set as the second argument:
$("<a></a>", {
href : track.permalink_url,
html : track.title
}).appendTo("#tracktitle")
.after("<br>");
Demo: http://jsfiddle.net/7CVnZ/

javascript example add remove element

I am struggling with javascript these days, I want to create dynamic add/remove element using java script and i came across following site, but following example doesn't working for me do you know what is wrong in example?
Adding and Removing Elements on the Fly Using JavaScript
I am having issue in following line, which i found using chrome developer tool
var html = '<input type="file" name="uploaded_files[]" /> ' +
'Remove';
Here is the screenshot of google chrome developer tool
You need to escape your quotes.
var html = '<input type="file" name="uploaded_files[]" /> ' +
'Remove';
You might need to escape those single quotes.
onclick="javascript:removeElement(\'file-\' + fileId + ''); return false;">Remove</a>';
That is what I would try.
You want the quotes to be there when you add the text.
You will also have a have files that are named like this
file-1
file-2
Did you add addElement('files', 'p', 'file-' + fileId, html);
At the end of addFile()?
We can't do anything for you if we don't have more information about your 'problem'
Be more explicit in your description.

jQuery Readability: insert table inside <li> element

I hope to get some advise about how to write the javascript and jQuery code more beautiful and gain more readability.
In this case, I hope to insert table inside a list element. Both list and table are added dynamic by using script.
I have some code like this:
$('#Items').append("<ul></ul>");
var car_index;
var photo_index;
var lot_index;
for (car_index = 0; car_index < cars.length; car_index++)
{
lot_index = car_index + 1;
//From here, I thought the code is really ugly...though it works.
//I can't image that I will need to adde 3 rows with 6 cols into the table by using this way
//Also each col may has their own style need to be assigned....
//Any advise??
$('#Items ul').append("<li id='r_" + car_index +"'></li>");
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");
}
As I write in the comments of above code. I could use append method and put a lot of HTML code in there. However it really looks ugly... and in the above example, I just added one row in the list. In the final goal, I have to add three rows, with about 6 cells. Each cell will have their own style set for the content. It will really be a mess.
Any advice will be appreciate! Thank you!
Perhaps use templating via either Mustache or jQuery.
See more: What Javascript Template Engines you recommend?
try this, coz
$('#Items ul').append("<li id='r_" + car_index +"'></li>); is not enclosed between " "
$('#Items ul').append("<li id='r_"+car_index+"'></li>");
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");
}
Alright...After some thought, I find a way which will be more clear to write this kind of code. I'm not sure if this is the goog choice since it will require more work...but I feel it is better to write this way.
The idea is really simple, create object to store the HTML tags which will fixed for every block. As my example, it is a table will repeated every time a list will be added. So why not store all fixed table tags and their style attribute into one array like object?
var unit =
{
table_header : "<table border = '1'>",
row_1_col_1 : "<tr><td>Lot ",
row_1_col_2 : "</td><td><a class='addto' href='#'>Add to like</a>",
row_2_col_1 : "</td></tr><tr><td>",
row_2_col_2 : "</td><td><img src='",
row_3 : "'></td></tr><tr><td>",
table_end : "</td></tr></table><hr />"
};
Make this variable global, than when you need to add table, the original code:
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");
Will become like this:
$('#r_' + car_index).append(unit['table_header'] +
unit['row_1_col_1'] + "Content in cell 1" +
unit['row_1_col_2'] + "Content in cell 2" +
unit['row_2_col_1'] + "Content in cell 3" +
unit['row_2_col_2'] + "Content in cell 4" +
unit['row_3'] + unit['table_end']);
Just be careful about double quote sign and single quote sign, and also, the array's index need to be quoted(see javascript array's use for detail if you got problem).
I think the advantage of this method is much more easy to modify the table. Add row, change content, or change style make much more easy since it use the single object.
I also not sure if this is a good way or not, hope to hear more about your thought! Thank you!

Categories