I am using java-query to generate a chess board on page load:
Basically I have an empty body:
<body>
</body>
I then have the following javascript linked:
var addsquareblack=function(i,row){$(document).ready(function(){
var square=$('<div class="square"></div>');
if ((i%2)===0)
{square.css('background-color','brown');}
$('.row').last().append(square);
});};
var addsquarewhite=function(i,row){$(document).ready(function(){
var square=$('<div class="square"></div>');
if ((i%2)===0)
{square.css('background-color','white');}
else
{square.css('background-color','brown');}
$('.row').last().append(square);
});};
var create=function(a){$(document).ready(function(){
var row=$('<div class="row"></div>');
$('body').append(row);
if ((a%2)===0)
{for(var i=1;i<9;i++){addsquareblack(i,row);}}
else
{for(var i=1;i<9;i++){addsquarewhite(i,row);}}
});};
var addrows=function(){
for(var i=1;i<9;i++){create(i);}
};
I then call in a script in head:
<script> addrows() </script>
However, the addsquarewhite and addsquare black are not functioning properly: My divs with class row are being added to body correctly, but then all of the squares that I am adding are getting bunched into the very last div. I thought that they would get added only to the last div available at the time of the method call. Clearly I don't understand something about scope/flow in javascript. Please enlighten.
Thanks!
Also your usage on ready handler is wrong
It is because you are adding the square elements to the last row instead of the row.
$('.row').last().append(square)
instead
var addsquareblack=function(i,row){
var square=$('<div class="square">1</div>');
if ((i%2)===0) {
square.css('background-color','brown');
}
row.append(square);
};
var addsquarewhite=function(i,row){
var square=$('<div class="square">2</div>');
if ((i%2)===0) {
square.css('background-color','white');
} else {
square.css('background-color','brown');
}
row.append(square);
};
var create=function(a){
var row=$('<div class="row"></div>');
$('body').append(row);
if ((a%2)===0) {
for(var i=1;i<9;i++){
addsquareblack(i,row);
}
} else {
for(var i=1;i<9;i++){
addsquarewhite(i,row);
}
}
};
var addrows=function(){
for(var i=1;i<9;i++){
create(i);
}
};
$(document).ready(function(){
addrows();
});
Demo: Fiddle
Related
I have write two function in my content.js file.(chrome extension for you tube)
finding element through "tag" name (document.getElementsByTagName).
after this i used it in two function but it is not working in second function while appending child in this tag.Below you get the two function
This is not working:
function buttond(){
var i=0;
for(i=0;i<10;i++){
var ge=document.getElementsByTagName("ytd-compact-video-renderer")[i];
var node=createElement("button");
var text=createTextNode("click");
node.appendChild(text);
ge.appendChild(node);
}
}
But this is working WHY??
function butstop(){
var i=0;
for(i=0;i<10;i++){
var ge=document.getElementsByTagName("ytd-compact-video-renderer")[i];
if(ge && ge.style.display=="none"){
ge.style.display="block";
}
else if(ge){
ge.style.display="none";
}
}
}
Final work i am doing is adding play-next button given in below image link.
image
Your problem is here:
var node=createElement("button");
var text=createTextNode("click");
You need to change this to:
var node=document.createElement("button");
var text=document.createTextNode("click");
After this, it will work fine.
Edit: JSFiddle Link
I have the following code:
var done = function(el) {
var tds = el.parent().parent().find('td');
for (var i in tds) {
tds[i].css('backgroundColor', 'green');
}
};
done($(this));
Where $(this) points to the element inside td tag - so I'm getting all nearby td tags and changing background color on them.
The problem is that it throws an error that tds[i].css function is undefined.
Doing this in clear javascript, with passing this, works perfectly, like so:
var done = function(el) {
var tds = el.parentNode.parentNode.getElementsByTagName('td');
for (var i in tds) {
tds[i].style.backgroundColor = 'green';
}
};
done(this);
What's wrong?
Maybe try this :
var done = function(el) {
var tds = el.parent().parent().find('td');
$(tds).each(function(){
this.css('backgroundColor', 'green');
});
};
done($(this));
I have to JSON files, I load them both into two tables like this:
$(window).load(function(){
$.getJSON('http://1xxxxxx/xxxxx_1_18.json', function(data) {
var output="<div class='outer'>";
for (var i in data.lbclassic118) {
output+="<div style='visibility:hidden;' class='lbclassic118'id="+"age" + data.lbclassic118[i].ageinweeks+">"+ '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks)'+ data.lbclassic118[i].ageinweeks+'</strong></center></th></tr><tr><td rowspan="3">Body Weight (g)</td><td>average</td><td><strong>'+ data.lbclassic118[i].average+'</strong></td></tr><tr><td>range min</td><td><strong>'+ data.lbclassic118[i].rangemin+'</strong></td></tr><tr><td>range mmax</td><td><strong>'+ data.lbclassic118[i].rangemmax+'</strong></td></tr><tr><td rowspan="3">feed sonsumption</td><td>kj bird day</td><td><strong>'+ data.lbclassic118[i].kjbirdday+'</strong></td></tr><tr><td>g bird day</td><td><strong>'+ data.lbclassic118[i].gbirdday+'</strong></td></tr><tr><td>cumulative</td><td><strong>'+ data.lbclassic118[i].cumulative+'</strong></td></tr></table>' +"</div>";
}
output+="</div>";
document.getElementById("placeholder1").innerHTML=output;
});
});
$(window).load(function(){
$.getJSON('http://xxxxxx/xxxxxx.json', function(data) {
var output="<div class='outer'>";
for (var i in data.lbclassic1990) {
output+="<div style='visibility:hidden;' class='lbclassic1990'id="+"age" + data.lbclassic1990[i].ageinweeks+">"+ '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks) '+ data.lbclassic1990[i].ageinweeks+'</strong></center></th></tr><tr><td>Egg No. per H.H.</td><td>cumul.</td><td><strong>'+data.lbclassic1990[i].cumul+'</strong></td></tr><tr><td rowspan="2">Rate of Lay %</td><td>per H.H.</td><td><strong>'+data.lbclassic1990[i].perhh+'</strong></td></tr><tr><td>per H.D.</td><td><strong>'+data.lbclassic1990[i].perhd+'</strong></td></tr><tr><td rowspan="2"> Egg Weight (g)</td><td>egg weight in week</td><td><strong>'+data.lbclassic1990[i].eggweightinweek+'</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>'+data.lbclassic1990[i].eggmasscumul+'</strong></td></tr><tr><td rowspan="2">Egg Mass -- g/H.D. -- kg/H.H.</td><td>egg mass in week</td><td><strong>'+data.lbclassic1990[i].eggmassinweek+'</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>'+data.lbclassic1990[i].eggmasscumul2+'</strong></td></tr></table>' +"</div>";
}
output+="</div>";
document.getElementById("placeholder2").innerHTML=output;
});
});
The information comes up as it should, I have no problems with that.
However, what I'm trying to do is just show ONE table at a time, not all the tables at the same time (don't want a table for each element in the JSONs) to be seen, but only one a time.
For that I'm implemeting a function that with a slider control will show or hide the tables.
Here's an images of the HTML output data structure:
Now, what I want to to is hide or show different DIVs (tables) with this script:
<script>
function leslider(valor) {
var elementos_lbclassic118 = document.getElementsByClassName("lbclassic118");
var elementos_lbclassic1990 = document.getElementsByClassName("lbclassic1990");
var total_elementos = elementos_lbclassic118.length + elementos_lbclassic1990.length;
var i;
for (i = 1; i < total_elementos.length+1; i++) {
document.getElementById("age"+i).style.visibility = "hidden";
}
document.getElementById("age"+valor).style.visibility = "visible";
}
However it won't work, the 1st JSON will show all the elements but never hide it, and the second one will place them all on top of each other, not sure where I'm failing.
I guess you are wrong "leslider" function.
How to use this "leslider" function, let's me see this code.
I found the culprit, I was getting length from a numeric, value. Here's the updated function.
<script>
function leslider(valor) {
var elementos_lbclassic118 = document.getElementsByClassName("lbclassic118");
var elementos_lbclassic1990 = document.getElementsByClassName("lbclassic1990");
var total_elementos = elementos_lbclassic118.length + elementos_lbclassic1990.length;
var i;
for (i = 1; i < total_elementos+1; i++) {
document.getElementById("age"+i).style.display = "none";
}
document.getElementById("age"+valor).style.display = "block";
}
You can ask the user to supply data by clicking to adding points to a char, see this demo.
But I don't know how to retrieve those points and send them back to the server (with a POST or AJAX, whatever). I just want to know how to get them in javascript.
Just access the chart variable defined like this in javascript:
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
...
});
});
</script>
Access the new points like this:
<script type="text/javascript">
function printObject(o) {
var out = '';
for (var p in o) {
out += p + ': ' + o[p] + '\n';
}
alert(out);
}
$("#clickme").click(function() {
for (var i = 0; i < chart.series[0].data.length; i++) {
printObject(chart.series[0].data[i]);
}
});
</script>
Perhaps even simpler than that, if you use the event/click function in the demo that you linked to, you can capture the values before the addSeries call:
...
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
//Do something fun here w/the points: x,y
....
//Stop doing something fun here w/the points
// Add it
series.addPoint([x, y]);
}
....
i have an html page, which is consist of many hyperlink like this inside body tag...
User Name
then i decide to use unobtrusive javascript ... then i'd like to change all the "a" tag to be...
<a id="354313" href=#>User Name</a>
when i click the second link above, i want that it'll call a function like the first link does,...
my question is how to get all the "a" element inside body tag then apply a function depend it's id...
With jQuery, something like this:
$('a').click(function() {
var id = this.getAttribute('id');
// Do something...
});
If you want it to work on all elements ever created, use this:
$('a').live('click', function() {
var id = this.getAttribute('id');
// Do something...
});
I hope this is what you are trying.
<script type='text/javascript'>
var alA = document.getElementsByTagName("a");
for(var aCounter=0;aCounter<alA.length;aCounter++) {
var singleA = alA[aCounter];
singleA.onclick = function () {
window.open = "http://www.example.com/?id="+singleA.id;
}
}
<script>
What you're after is this code:
<script type="text/javascript">
window.onload = function WindowLoad() {
var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
var oLink = arrLinks[i];
var sCurHref = oLink.href;
if (sCurHref.indexOf("?id=") >= 0) {
var ID = sCurHref.split("?id=")[1];
if (ID.length > 0) {
oLink.id = ID;
oLink.href = "#";
oLink.onclick = function() {
document.location.href = sCurHref;
return false;
}
}
}
}
}
</script>
This will iterate all the links, changing the visible HREF to "#" and preserving their functionality, applying the proper ID. (Though you didn't say what's the use of that ID)
Feel free to mess around with the live test case: http://jsfiddle.net/yahavbr/uMbEY/
Something like:
<script language="javascript">
function myFunction(id)
{
alert(id);
}
</script>
<a id="354313" onclick="myFunction(this.id);" href="#">;User Name<;/a>
Not sure though Test it :)
I will rather say that add class to the links u want to handle this way
<a class="mylink" ... >User Name </a>
Now read the elements by class name. If you are using new browsers or any JS library like JQuery its great.
var links = document.getElementsByClassName("mylink") //Method in Mozilla Browser
Above are the links that you can process nicely without getting into trouble.
// Function that you want to call
function fake(id)
{
// Your content
}
// Get all "a" elements and put it in an Array
var links = window.document.getElementsByTagName("a");
for (var i=0; i<links.length; ++i)
{
fake(links[i].id);
}