We Keep Coding

Im getting objectHTMLimageElement instead of the image in my list item

function story(){
if(document.getElementById("area").value == "salwa"){
var oImg = document.createElement("img");
oImg.setAttribute('src', './images/logo.png');
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
document.getElementById("story-result").innerHTML += "<li>" + oImg + " </li>";
}else{
document.getElementById("li-result").innerHTML += "<h1>" + "no results" + " </h1>";
}
}

Is this working?
function story(){
if (document.getElementById("area").value == "salwa"){
document.getElementById("story-result").innerHTML = "<img src=" + "'./images/logo.png'" + "alt=" + "'na'" + "height=" + "'1px'" + "width=" + "'1px'" + ">" + "</img>";
} else {
document.getElementById("li-result").innerHTML += "<h1>" + "no results" + " </h1>";
}
}

You have to get the image source attribute and make it equal to the innerHTML of the element with id story-result.
You are currently using the image itself, not its src attribute.
Try this:
document.getElementById("story-result").innerHTML += "<li>" + oImg.getAttribute('src') + " </li>";

Can't get element's style to change using a variable

So my script creates a element and changes it's innerHTML.
My problem is inside my script you can see this:
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span id="LogColor" style="">' + color + '</span> </p>';
I'm needing help with this part of the innerHTML:
'<span id="LogColor" style="">' + obj.lineColor + '</span> </p>'
As you can see in my full script below after the child gets append. You see where I tried to change the span's style using a variable. It doesn't seem to change it's color though.
Full Script:
nvtSource.onmessage = function(e) {
var obj = JSON.parse(e.data);
var line = JSON.stringify(obj.line)
var size = JSON.stringify(obj.lineWidth)
var color = JSON.stringify(obj.lineColor) // Not needed, but defined anyways.
if (line == null)
{
//Do nothing..
}
else
{
var CurrentLine = document.createElement('p');
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span
id="LogColor" style="">' + color + '</span> </p>';
document.getElementById("LineConsole").appendChild(CurrentLine);
document.getElementById("LogColor").style.color = obj.lineColor;
}
The part I tried to change it's style.
document.getElementById("LogColor").style.color = obj.lineColor;
I even tried to do something like:
document.getElementById("LogColor").style = "color:" + color + ";"

I don't exactly know what you are trying to do here but if you want the line you are adding to have the textcolor you could try:
'<span style="color:' + obj.lineColor + '">' + obj.lineColor + '</span> </p>'
provided your lineColor is a valid css color string like "red", "#ffffff" or "rgb(255,255,255)"
you would no longer need the id.

Best Way to make one section of a LI editable

What is the best way to make JUST card.price editable? I've futzed around with several different ways that seemed stupid simple, but it just isn't producing the right results. Does anyone out there have some suggestions?
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + card.price +
"<button class='removeThis'>" +
"X" + "</button>" + "</li>";

Here's a simple way to do that with input elements. Simplified example to illustrate it:
var card = {};
card.card_name = "Card Name";
card.price = "4.00";
var inputBeg = "<input size=8 style='border: none;' value='$";
var inputEnd = "'>";
var html = "";
for (var i = 0; i < 3; i++) {
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" +
"X" + "</button>" + "</li>";
}
document.body.innerHTML = html;
You could get much fancier with the styling if you wanted to.

How to add event handlers to dynamically created buttons in jQuery?

I used AJAX to dynamically create the HTML but I've encountered a problem
<script>
function page_loaded(){
jQuery.ajax({
method: "GET",
url: "get_data_dashboard.php",
success: function(data){
var markers = JSON.parse(data);
for(var i = 0; i < markers.length; i++){
var m = markers[i];
var markerHTML = "<div class='marker'>" +
"<span id='naziv'>Naziv zahtjeva: " + m.naziv + "</span></br>" +
"<span id='ulica'>Ulica: " + m.ulica + "</span></br>" +
"<p id='opis'>Opis:</br>" + m.opis + "</p></br>" +
"<span id='email'>Email: " + m.email + "</span></br>" +
"<img id='slika' src='" + m.link_slike + "' />" + "</br>" +
"<textarea rows='5' cols='30' maxlength='500' id='t" + m.marker_id + "' placeholder='Komentar'>" + "</textarea></br>"
+ "<div class='buttons'><a href='odobri_prijavu.php?id=" + m.marker_id + "'>Odobri</a>" +
"<a href='izbrisi_prijavu.php?id=" + m.marker_id + "'>Izbriši</a>" + "</div>" +
"</div><hr>";
$('#content').append(markerHTML);
}
}
})
}
$(document).ready(page_loaded());
</script>
I tried to use buttons first instead of anchor tags but I couldn't figure how to add event handlers to dynamically created buttons that will post a request via AJAX to some php script with the proper id as the value and the value of the textarea. So I used the anchor tag and I was able to send the id, but I can't send the value of the textarea because I don't know how to reference it and even if I referenced it, it will be NULL because its value is set to the anchor tag at the very beginning and I want to type in text in the textarea.

Instead of listening to individual "elements", you can actually listen to a parent of a specific element (You'll need to supply another parameter to on()). A popular pattern is to listen to "body" (because body is a parent to all, technically), but any non-dynamic parent element will work! Here's an example:
//notice the second parameter supplied
$("body").on("click", ".my-dynamic-element", function(e){
//awesome code that makes the world a better place goes here
//this code triggers when .my-dynamic-element is clicked, wootz
});

Event delegation is your friend.
I don`t see any actions that actually do event handling, but a simple solution would be something like:
$(document).on('click', '.your-button-class', function(){
// do your thing
});

<script>
function page_loaded(){
jQuery.ajax({
method: "GET",
url: "get_data_dashboard.php",
success: function(data){
var markers = JSON.parse(data);
for(var i = 0; i < markers.length; i++){
var m = markers[i];
var markerHTML = "<div class='marker'>" +
"<span id='naziv'>Naziv zahtjeva: " + m.naziv + "</span></br>" +
"<span id='ulica'>Ulica: " + m.ulica + "</span></br>" +
"<p id='opis'>Opis:</br>" + m.opis + "</p></br>" +
"<span id='email'>Email: " + m.email + "</span></br>" +
"<img id='slika' src='" + m.link_slike + "' />" + "</br>" +
"<textarea rows='5' cols='30' maxlength='500' id='t" + m.marker_id + "' placeholder='Komentar'>" + "</textarea></br>"
+ "<div class='buttons'>Odobri" +
"<a href='izbrisi_prijavu.php?id=" + m.marker_id + "'>Izbriši</a>" + "</div>" +
"</div><hr>";
$('#content').append(markerHTML);
}
}
})
}
$(document).ready(page_loaded());
function clickHandler(id){
$('#'+id) // selects the button
$('#t'+id) // selects the text area
}
</script>

Difference between executing in JS console and as script

I have a website with links, which should open a Lightbox (3rd party plugin Magnific Popup / jquery). After manipulating content on the site, i have to re-execute some Javascript of the Lightbox plugin, so that it recognizes the new links as links to lightboxes.
function loadLightbox() {
console.log("Lightbox start"); // for debugging
$('a.img').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
image: {
titleSrc: 'title_off',
markup:
'<div class="mfp-figure">' +
'<div class="mfp-close"></div>' +
'<div class="mfp-title"></div>' +
'<div class="mfp-img"></div>' +
'<div class="mfp-bottom-bar">' +
'<div class="mfp-counter"></div>' +
'</div>' +
'</div>' // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button
}
});
console.log("Lightbox end"); // for debugging
}
I have a function, which manipulates the content on the page changeSuggestion(). Because I want to have the content changed every 6 secondes, I use the setInterval function.
setInterval(function () { changeSuggestion(); loadLightbox(); }, 6000);
My problem is, that it changes every 6s the content on the page, but the lightbox thing doesn't work (although the lightbox function produces output). But when I copy the loadLightbox() function into the firefox console and execute it, the lightbox in does work until it changes the content again. So my question is, what is the difference between executing via setInterval and executing in the Firefox javascript console?
Edit:
changeSuggestion: opens a JSON file, and produces html-formatted output, the page is manipulated by $("#blogSuggestion").html(result)
<!-- language: lang-js -->
function changeSuggestion() {
$.getJSON("blog/blog.json", function (data) {
var n = 0,
showId,
entry,
result;
$.each(data.blogentries, function (key, entry) {
if (entry.id > n) {
n = entry.id;
}
});
showId = randomIntFromInterval(0, n - 1);
if (data.blogentries[showId]) {
entry = data.blogentries[showId];
if (entry.type === "text") {
result = "<a class=\"" + entry.type + "\" title=\"" + entry.title + "\" href= \"#blogID" + entry.id + "\"><b>" + entry.title + "</b>";
} else {
result = "<a class=\"" + entry.type + "\" title=\"" + entry.title + "\" href= \"" + entry.source + "\"><b>" + entry.title + "</b>";
}
if (entry.content) {
result = result + "<br /><p>" + getExcerpt(entry.content, 20, '') + "</p><div id= \"blogID" + entry.id + "\" class=\"blogLightbox mfp-hide\"><img alt=\"" + entry.title + "\" src=\"" + entry.thumb + "\" ><div class=\"blogText\"><h3>" + entry.title + "</h3><p>" + entry.content + "</p></a></div></div>";
} else {
result = result + '<img alt=\"' + entry.title + '\" src=\"' + entry.thumb + '\"></a>';
}
$("#blogSuggestion").html(result);
} else {
console.log("Nothing with ID: " + showId);
}
});
Edit:
As its written in the comments, the content is changed asynchronously. If I put the asynchronously function into the body of changeSuggestion it works!