We Keep Coding

Adding html content from javascript, and changing it in html on button click

I'm working at a twitch.tv online stream , and i'm tryin' :
To prepend an html code from javascript in HTML
To put the content called from javascript , in a div with id="followerInfo" , and change the content every time when i press the buttons (depends on type of data called by that buttons)
. When I press the button all , it must show me all the tv streams , same for online - online streams and also with offline btn
. and the most important , to understand what am I doing here, not only to copy paste a code...
I'm stuck here .. I'm a self-taught (tryin' to be programmer) and implicitly a newbie in this field, but I want to learn that's why I'm asking you for a little help , if you can also explain me a little bit how to do it.
<div class="row second text-center">
<div class="col-md-4 btn btn-info" id="all">
All
</div> <!-- Online -->
<div class="col-md-4 btn btn-success" id="online">
Online
</div> <!-- Online -->
<div class="col-md-4 btn btn-danger" id="offline">
Offline
</div> <!-- Offline -->
</div>
<div id="followerInfo" style="margin-top:50px;">
</div>
for button All
$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");
for button offline
$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");
for button online
$("#followerInfo").prepend("<div class='row'>" +
"<div class='col-md-4'>" + "<a href='" + ur_l +
"' target='_blank'><img src='" + logo + "'></a>" +
"</div>" +
"<div class='col-md-4'>" + name + "</div>" +
"<div class='col-md-4'>" + status + "</div></div>");
If it will help you to understand better my code , here is the codepen link
http://codepen.io/queky18/pen/BzbpwV

$('.second div').on('click', function(e) {
e.preventDefault();
var status = $(this).attr('id'), // get the id of the status button clicked on.
followerRow = $('#followerInfo .row'),
statusColumn = $('#followerInfo .col-md-4:last-child');
statusColumn.each(function(){// check the text in the last column of each row
if (status == "all") { // for the show all button.
followerRow.show();
} else {
if ($(this).text().toLowerCase() != status) { // convert text to lowercase and compare with status
$(this).parent().hide(); // gets the parent div of the last column, which would be the row and hide it.
} else {
$(this).parent().show(); // otherwise we show the row.
}
}
});
});
This should work with your current code, but as mentioned, it's probably worth the time to go through and re-factor your code if you start to see duplication.
See an updated version here - http://codepen.io/anon/pen/PzLALa

Execute an if condition if a button is not inside a <tr> element

I want to execute my if condition only when a button is not inside the tr. Here is my code:
if (!$("tr").hasClass('hidebutton')) {
var OriginalContent = $("#tabletask tr[data-id='" + parrentid + "'] > td:first-child").text();
$("#tabletask tr[data-id='" + parrentid + "'] > td:first-child").html("<button class=hidebutton>-</button> " + OriginalContent + " ");
}
But it is not working. The if condition is executing all the time.

I think I get a little of what you want.
It seems like you were to create a button if no button found inside "tr" right? If I'm correct, you may play the snippet below.
if(!$("tr button").hasClass("hidebutton")){
$("#tabletask tr[data-id='" + parrentid + "'] > td:first-child").html('<button class="hidebutton">-</button> ' + OriginalContent);
}
by the way it seems like you missed something on this line
html("<button class=hidebutton>-</button> " + OriginalContent + " ");
You need to enclose hidebutton like this 'hidebutton' see below;
.html("<button class='hidebutton'>-</button> " + OriginalContent + " ");

Another way is to use a loop:
$("tr").each(function( index, value ) {
if (!$(this).hasClass('hidebutton')){
console.log($(this,"td:first-child").text());
}
});
Take a look at the jsfiddle

How to pass string in Javascript function dynamically

I have a javascript function like this
function doIt(link) {
alert(link);
}
And i call this function in below given JS code, where i am creating an a tag and appending it to my html page on runtime:
jQuery.each(data, function (i, val) {
var card = '<a href="Views/NewsDetail.html" onclick=" doIt(' + val.Img + '); "> \
<div class=" card"> \
<img src='+ val.Img + ' /> \
<p>'+ val.Title + '</p> \
</div> \
</a>';
document.getElementById('News').innerHTML += card;
});
Say for example our val.Img = 'abcd'
When i click the a tag it calls doIt(abcd), but i want to call doIt('abcd') passing it as string.
Is there any workaround for this.

You need to escape quotes like
var card ='<a href="Views/NewsDetail.html" onclick="doIt(\'' + val.Img + '\'); "> \
//^ ^
As per your current implementation the argument abcd is treated as variable thus you must be getting undefined

You can do this one:
var card='';

The below HTML string already used both quotes till the characters doIt(. So any string type values inside the quotes, must be escaped using any of the quote-character.
var card = '<a href="Views/NewsDetail.html" onclick=" doIt(' + val.Img + '); ">'
to [added quote escape character \"]
var card = '<a href="Views/NewsDetail.html" onclick=" doIt(\"' + val.Img + '\"); ">'

Yet another option:
var doItAndRedirect=function(val){
//do stuff with val here
window.location = "Views/NewsDetail.html";
}
jQuery.each(data, function (i, val) {
var card = '<a href="javascript:doItAndRedirect(\''+ val +'\')">'+
'<div class=" card">' +
'<img src='+ val.Img + ' />' +
'<p>'+ val.Title + '</p>' +
'</div>'+
'</a>';
document.getElementById('News').innerHTML += card;
});

It is already a string it just doesn't display '' on alert but at the background it is string only.

doIt("' + val.Img + '");
should do it, but if you have, e.g, " inside val.Img you need to quote those: How do I add slashes to a string in Javascript?

Javascript output not showing

We have a JavaScript assignment that we have to do. We have to build a sentence generator. When I run this in Chrome, nothing happens when I click the buttons. When I check the Console Log, it says Uncaught ReferenceError: mySubject is not defined. I thought I defined it already in element1.onclick function?
This is my code so far:
<body>
<div id="container">
<div id="buttons">
<button id="btn1">Generate subject</button>
<input name="subject" type="text" id="subject"
/>
<button id="btn2">Generate verb</button>
<input name="verb" type="text" id="verb" />
<button id="btn3">Generate adjective</button>
<input name="adj" type="text" id="adj" />
<button id="btn4">Generate object</button>
<input name="object" type="text" id="object" />
</div>
<!--buttons closing div-->
<div>
<p id="output">asjkldhfahfjasf;d</p>
</div>
<!--output closing div-->
</div>
<!--container closing div-->
<script>
var subject = new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My Dentist");
var verb = new Array("licks", "pets", "hugs", "stabs", "eats");
var adj = new Array("fat", "ugly", "delicious", "redundant", "hopeless");
var object = new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");
var element1 = document.getElementById("btn1");
var element2 = document.getElementById("btn2");
var element3 = document.getElementById("btn3");
var element4 = document.getElementById("btn4");
element1.onclick = function() {
mySubject = subject[Math.random() * subject.length]
};
element2.onclick = function() {
myVerb = verb[Math.random() * verb.length]
};
element3.onclick = function() {
myAdj = adj[Math.random() * adj.length]
};
element4.onclick = function() {
myObject = object[Math.random() * object.length]
};
document.getElementById("output").innerHTML = mySubject + myVerb + " the" + myAdj + myObject + ".";
</script>
</body>
I'm starting to get so lost and have no idea what to do and this is only one of the many problems I have.
EDIT:
So I got some help with my Javascript and everything is now working except for the output. I want it to output into the output div, but it's not outputting anything. This is my code now:
<h1>The Amazing Fantastical Sentence Generator!</h1>
<h4>Have hours of fun with your imaginary friends!</h4>
</div><!--title closing div-->
<div id="buttons">
<button id="btn1">Generate subject</button>
<input name="subject" type="text" id="insubject"/>
<button id="btn2">Generate verb</button>
<input name="verb" type="text" id="verb"/>
<button id="btn3">Generate adjective</button>
<input name="adj" type="text" id="adj"/>
<button id="btn4">Generate object</button>
<input name="object" type="text" id="object"/>
<div >
<p id="output"></p>
</div><!--output closing div-->
</div><!--container closing div-->
<script>
var subject=new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My Dentist");
var verb=new Array("licks", "pets", "hugs", "stabs", "eats");
var adj=new Array("fat", "ugly", "delicious", "redundant", "hopeless");
var object=new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");
var element1=document.getElementById("btn1");
var element2=document.getElementById("btn2");
var element3=document.getElementById("btn3");
var element4=document.getElementById("btn4");
element1.onclick=function() {document.getElementById('insubject').value=subject[Math.floor(Math.random()*(subject.length))];}
element2.onclick=function(){document.getElementById('verb').value=verb[Math.floor(Math.random()*(verb.length))];}
element3.onclick=function(){document.getElementById('adj').value=adj[Math.floor(Math.random()*(adj.length))];}
element4.onclick=function(){document.getElementById('object').value=object[Math.floor(Math.random()*(object.length))];}
document.getElementById("output").innerHTML= document.getElementById("insubject").value + document.getElementById("verb").value + " the" + document.getElementById("adj").value + document.getElementById("object").value + ".";
</script>
</body>
</html>

Variables declared inside functions are local to those functions, which means that you can't use them outside of those functions. Try declaring your variables as global outside of the functions.

you should define the mySubject variable along with myVerb and myAdj as follows :
var mySubject;
var myVerb;
var myAdj;

You are defining it inside a function. Declare them outside the function, then try assigning them the value inside.

When I check the Console Log, it says Uncaught ReferenceError:
mySubject is not defined. I thought I defined it already in
element1.onclick function?
JavaScript scope is function scope. Any variable declared within a function only can be accessed by that function and any nested functions but not the outer ones.
If you want to access mySubject outside the function too you need to declare it where you have verb, subject, etc.. delcared.
In addition, even though you still have the issue that your document.getElementById command is using mySubject before the click event is assigning it but that is a different issue I suppose.

So I figured out how to fix this.
After having edited my code again, all the buttons were working, but they were not outputting correctly into the output div. So I declared all the Math.Random equations that were being run on my arrays, so that they all had a default answer. Also I created a default output that would display in the output div.
var subStr = subject[Math.floor(Math.random()*(subject.length))];
var verbStr = verb[Math.floor(Math.random()*(verb.length))];
var adjStr = adj[Math.floor(Math.random()*(adj.length))];
var objStr = object[Math.floor(Math.random()*(object.length))];
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
Then I changed my onclick events.
element1.onclick=function(){
subStr = subject[Math.floor(Math.random()*(subject.length))];
document.getElementById('insubject').value=subStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
element2.onclick=function(){
verbStr = verb[Math.floor(Math.random()*(verb.length))];
document.getElementById('verb').value=verbStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
element3.onclick=function(){
adjStr= adj[Math.floor(Math.random()*(adj.length))];
document.getElementById('adj').value=adjStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
element4.onclick=function(){
objStr= object[Math.floor(Math.random()*(object.length))];
document.getElementById('object').value=objStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
Now each Math.random was being calculated again, followed by it being inputted into the specific text field, and then outputting into the output div.

Javascript Parameter Passing Not Working

The code dynamically creates a listview which works but i want to make it so when a listview item is clicked it sends the a url paramater to another method. When i set a paramater it doesnt alert the paramater, but when i give no parameter it works.
var output =
"<li onclick='openURL()'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above works - No parameter in openURL();
var output =
"<li onclick='openURL('" + results.rows.item(i).url + "')'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above doesnt work - I have done alert(results.rows.item(i).url) and it has a value.
function openURL(url) {
alert("opening url " + url);
}
Could someone explain what i'm doing wrong, i've been trying to solve the problem for hours.
Cheers!

You are using single quotes to open the HTML attribute, you can't use it as JavaScript String because you'll be closing the HTML attribute, use double quotes:
var output =
"<li onclick='openURL(\"" + results.rows.item(i).url + "\")'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";