I have function that returns an array of numbers. Next I have to display same number of stars in the related result id. As a complete noob in JavaScript(still struggling with validations:P ) I tried many things to no avail.
Hopefully the code snippets(current state) below will clear my issue -
function display(name1, number1, sign1, name2, number2, sign2, check, y_nat, o_nat) {
document.getElementById("yname").innerHTML = name1 ;
document.getElementById("ynumber").innerHTML = number1 ;
document.getElementById("ysign").innerHTML = sign1 ;
document.getElementById("oname").innerHTML = name2 ;
document.getElementById("onumber").innerHTML = number2 ;
document.getElementById("osign").innerHTML = sign2 ;
document.getElementById('result').innerHTML = check + '%';
/* I am trying to display y_nat[0] Stars in the result id - yr by calling a show_image(id, number) function! */
x = "yr";
document.getElementById("yr").innerHTML = show_image(x ,y_nat[0]) ;
x = "yl";
document.getElementById("yl").innerHTML = y_nat[1] ;
x = "yf";
document.getElementById("yf").innerHTML = y_nat[2] ;
x = "yp";
document.getElementById("yp").innerHTML = y_nat[3] ;
x = "ys";
document.getElementById("ys").innerHTML = y_nat[4] ;
x = "yi";
document.getElementById("yi").innerHTML = y_nat[5] ;
x = "or";
document.getElementById("or").innerHTML = o_nat[0] ;
x = "ol";
document.getElementById("ol").innerHTML = o_nat[1] ;
x = "of";
document.getElementById("of").innerHTML = o_nat[2] ;
x = "op";
document.getElementById("op").innerHTML = o_nat[3] ;
x = "os";
document.getElementById("os").innerHTML = o_nat[4] ;
x = "oi";
document.getElementById("oi").innerHTML = o_nat[5] ;
}
function show_image (id,number) {
var img = document.createElement("img");
img.src = "stars2.png";
x = number;
y = id;
for (i =0; i<x; i++){
document.getElementById(y).appendChild(img);
}
}//or something of this sort
Please let me know if the issue is unclear. I am still trying to solve it and will be really obliged someone can guide in this. I am trying to learn JavaScript. I am trying to use the code from the following link.
http://www.codingforums.com/archive/index.php/t-94715.html
Thanks in advance.
1st problem I see is that you need to have the following two lines IN the loop
var img = document.createElement("img");
img.src = "stars2.png";
like this:
for (var i =0; i<x; i++){
var img = document.createElement("img");
img.src = "stars2.png";
document.getElementById(y).appendChild(img);
}
2nd problem: show_image doesn't return anything (except for undefined) but you use it to set the html-content of the element you just added the images:
document.getElementById("yr").innerHTML = show_image(x ,y_nat[0]) ;
change this line to:
show_image(x ,y_nat[0]) ;
It could be that there are more things wrong, but that's what I noticed. I made a small example for you that works (tested in IE and Chrome):
<html>
<head>
<script type="text/javascript">
function display() {
var x = "yr";
show_image(x ,3) ;
}
function show_image (id,number) {
var x = number;
var y = id;
for (var i =0; i<x; i++){
var img = document.createElement("img");
img.src = "stars2.png";
document.getElementById(y).appendChild(img);
}
}
</script>
</head>
<body onload="display();">
<div id="yr"></div>
</body>
</html>
Related
I have links on page and want mask them. I want,
that at onLoad all points in urls (which are in href) will be replaced with something like "|",
so instead of
link
there is somehting like
link.
Then, at onClick replacements should be reversed to make links working again.
Need help to get this code to work:
function mask() {
var str = document.getElementByName("a");
var x = str.attributes.href.value.replace('.', '"|"');
document.getElementsByTagName("a").attributes.href.value = x;
}
function unmask(){
var str = document.getElementByName("a");
var x = str.attributes.href.value.replace('"|"', '.');
document.getElementsByTagName("a").attributes.href.value = x;
}
<body onLoad="mask()">
link
</body>
You have to use the getElementsByTagName method:
function mask() {
var a = document.getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
a[i].attributes.href.value = a[i].attributes.href.value.replace(/\./g, '"|"');
}
}
function unmask() {
var a = document.getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
a[i].attributes.href.value = a[i].attributes.href.value.replace(/"\|"/g, '.');
}
}
<body onLoad="mask()">
link
</body>
There are several issues in your code:
document.getElementByName("a") is not valid
str.attributes.href.value is not valid
You need to go global replace to replace all the . with | and vice-versa.
function mask() {
var str = document.getElementsByTagName("a")[0];
var x = str.href.replace(/\./g, '"|"');
str.href = x;
}
function unmask(){
var str = document.getElementsByTagName("a")[0];
var x = str.href.value.replace(/"|"/g, '.');
str.href = x;
}
<body onLoad="mask()">
link
</body>
In one function I have a loop that creates 10 images using the createElement();. In the other function I have another loop that contains info that I need to add text after each picture but my code adds it at the end of all 10 pictures I need them to be after every corresponding picture.
This is the function that displays the text:
function displayAlbum(json){
for (var x = 0; x<json.length;x++){
var span1 = document.createElement("span");
span1.innerText = json[x].album;
console.log(json[x].album);
var display = document.getElementById("results");
display.appendChild(span1);
}
}
I cant individually set the id of each image because i created them in js. Thanks for the help in advance and no jquery please
for (var x = 0; x<json.length;x++){
var image = document.createElement("img");
image.id = "picture";
image.width = 100;
image.height = 100;
image.src = json[x].cover;
var display = document.getElementById("results");
display.appendChild(image);
var a = document.getElementById("artist");
var y = document.getElementById("year");
var artist = document.getElementById("artist").selectedIndex;//index of value of the switch statement
var year = document.getElementById("year").selectedIndex;//index of value of the switch statement
var realYear = y[year].text;//Value of the selected text
var realArtist = a[artist].text;//Value of the selected text
var display = document.getElementById("Results");
}
This is my second loop. I want displayalbum to appear after every picture. I cannot combine them because of other complications in the code
Try to do something like that: plunker
function displayAlbum(){
for (var x = 0; x < 10 ; x++){ // change to json.length
var span1 = document.createElement("span");
span1.innerText = 'json[x].album';
span1.id = 'span'+x;
var display = document.getElementById("results");
display.appendChild(span1);
}
}
The loop where you are creating images, give a unique id to image like image.id = "picture" + x;
Then change displayAlbum() function to use corresponding image to place the span tag.
function displayAlbum(json){
for (var x = 0; x<json.length;x++){
var span1 = document.createElement("span");
span1.innerText = json[x].album;
console.log(json[x].album);
var display = document.getElementById("results");
var img = document.getElementById("picture" + x); // use unique id of img to access it
if(img.nextSibling) { // if img is not the last node in 'results'
display.insertBefore(span1, img.nextSibling);
} else { // if img is the last node in 'results'
display.appendChild(span1);
}
}
}
You can achieve your goal with single loop and using Figure and FigCaption element , specifically created for this kind of display image with its description
var json = [{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test1"},{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test2"}];
for (var x = 0; x<json.length;x++){
var fig = document.createElement("figure");
var figCap = document.createElement("figcaption");
figCap.innerText = json[x].album;
var image = document.createElement("img");
image.id = "picture";
image.width = 100;
image.height = 100;
image.src = json[x].cover;
var display = document.getElementById("results");
fig.appendChild(image);
fig.appendChild(figCap);
display.appendChild(fig);
}
<div id="results">
</div>
I'm not a programmer, but trying to write a script for Photoshop. Below is something that I found, but it simply increments the files "1.png, 2.png, etc..." I'd like to name the exported files, "documentName_canvasWidth_canvasHeight_incrementedNumber.png"
function sfwPNG24(saveFile){
var pngOpts = new ExportOptionsSaveForWeb;
pngOpts.format = SaveDocumentType.PNG
pngOpts.PNG8 = false;
pngOpts.transparency = true;
pngOpts.interlaced = false;
pngOpts.quality = 100;
activeDocument.exportDocument(new File(saveFile),ExportType.SAVEFORWEB,pngOpts);
}
/*
Incrementing a number inside a text layer then Saving it in PNG
*/
var layer = activeDocument.layers[0];
if (layer.kind == 'LayerKind.TEXT') {
for (var i=1; i < 7; i++) {
layer.textItem.contents = i.toString();
sfwPNG24( 'filepathgoeshere'+ i +'.png');
};
};
Add these changes to the second part of the code:
var layer = activeDocument.layers[0];
// documentName_canvasWidth_canvasHeight_incrementedNumber.png
var srcDoc = app.activeDocument;
// get width and height
var W = srcDoc.width.value;
var H = srcDoc.height.value;
// get document name
var fn = srcDoc.name;
if (layer.kind == 'LayerKind.TEXT')
{
for (var i=1; i < 7; i++)
{
layer.textItem.contents = i.toString();
sfwPNG24( 'filepathgoeshere'+ W + "_" + H + "_" + i +'.png')
}
}
I want to add a new image in each cell of the new table and give it the same source as the old table, and then make it clickable. Firstly, I did this:
function showData() {
if (localStorage.getItem(name) !== null) {
var showme = localStorage.getItem(name);
alert("I got the table");
var newTable = document.createElement('table');
newTable.innerHTML = showme;
newTable.id = "newTable";
newNumRows = newTable.getElementsByTagName('tr').length;
newNumCells = newTable.getElementsByTagName('td').length;
newNumCols = newNumCells / newNumRows;
alert(newNumRows);
alert(newNumCells);
alert(newNumCols);
var newImages = newTable.getElementsByTagName('img');
for (var i = 0; i < newImages.length; i += 1) {
var picSource = newImages[i]['src'];
console.log(picSource);
}
function addNewImage(newNumCols) {
var newImg = new Image();
newImg.src = picSource;
col.appendChild(newImg);
newImg.onclick = function() {
alert("WOW");
};
}
for (r = 0; r < newNumRows; r++) {
row = newTable.insertRow(-1);
for (c = 0; c < newNumCols; c++) {
col = row.insertCell(-1);
addNewImage(newNumCols);
}
}
var showIt = document.getElementById('holdTable');
showIt.appendChild(newTable);
}
}
This works to a certain extent, but, unfortunately, only the last image was displaying. So, I did a bit of looking around and I think it has to do with closure (apologies for any duplication), but it's a concept I am really struggling to understand. So then I tried this:
function showData() {
if (localStorage.getItem(name) !== null) {
hideTaskForm();
var showme = localStorage.getItem(name);
var oldTable = document.createElement('table');
oldTable.innerHTML = showme;
newTable = document.createElement('table');
newTable.id = "newTable";
var i, r, c, j;
newNumRows = oldTable.getElementsByTagName('tr').length;
newNumCells = oldTable.getElementsByTagName('td').length;
newNumCols = newNumCells / newNumRows;
var newTableCells = newTable.getElementsByTagName('td');
var getImages = oldTable.getElementsByTagName('img');
for (r = 0; r < newNumRows; r++) {
row = newTable.insertRow(-1);
for (c = 0; c < newNumCols; c++) {
makeNodes = row.insertCell(-1);
}
}
for (var j = 0; j < newTableCells.length; j++) {
var theNodeImage = document.createElement("img");
newTableCells[j].appendChild(theNodeImage);
alert(newTableCells[j].innerHTML); //This gives me img tags
}
for (i = 0; i < getImages.length; i += 1) {
var oldSource = getImages[i]['src']; //gets the src of the images from the saved table
console.log(oldSource);
//alert(oldSource);//successfully alerts the image paths
var newPic = new Image(); //creates a new image
(function(newPic, oldSource) {
newPic.src = oldSource;
alert(newPic.src); //gives the same image paths
newTable.getElementsByTagName('img').src = newPic.src; //This doesn't work - table is blank???
})(newPic, oldSource);
}
var showIt = document.getElementById('holdTable');
showIt.appendChild(newTable);
}
}
Now, this doesn't throw any errors. However, nor does it fill the table. It does give me the source and I think I have created the new image objects to attach to the img tags in the newTableCells, but the table is showing up blank. I don't know where I am going wrong. All help really welcome.
Note: Even as a hobbyist, even I know there are probably tons of more efficient ways to do this, but I purposely did it this way to try and help me understand the logic of each step I was taking.
In your code you have:
var newImages = newTable.getElementsByTagName('img');
for (var i = 0; i < newImages.length; i += 1) {
var picSource = newImages[i]['src'];
console.log(picSource);
}
At the end of this, picSource has the value of the last image's src attribute. Then there is:
function addNewImage(newNumCols) {
var newImg = new Image();
newImg.src = picSource;
col.appendChild(newImg);
newImg.onclick = function() {
alert("WOW");
};
}
A value is passed to newNumCols but not used in the function. The value of picSource comes from the outer execution context and is not changed, so it's still the last image src from the previous for loop.
for (r = 0; r < newNumRows; r++) {
row = newTable.insertRow(-1);
for (c = 0; c < newNumCols; c++) {
col = row.insertCell(-1);
addNewImage(newNumCols);
}
}
This loop just keeps calling addNewImage with a single parameter that isn't used in the function, so you get the same image over and over.
For the record, the addNewImage function does have a closure to picSource, but it also has a closure to all the variables of the outer execution contexts. This isn't the issue, though it perhaps masks the fact that you aren't setting a value for picSource on each call, so you get the left over value from the previous section of code.
You haven't provided any indication of the content of showme, so it's impossible to determine if this approach will work at all.
Note
Where you have:
var showme = localStorage.getItem(name);
alert("I got the table");
var newTable = document.createElement('table');
newTable.innerHTML = showme;
newTable.id = "newTable";
IE does not support setting the innerHTML property of table elements, though you can create an entire table as the innerHTML of some other element and set the innerHTML of a cell (tr, th). If you want to use this approach, consider:
var div = document.createElement('div');
div.innerHTML = '<table id="newTable">' + showme + '<\/table>';
var newTable = div.firstChild;
I have been looking at this code for a long time trying to figure this out, but I am having no luck. This issue is that I want to assign a value to the parameter boxId. When I click on a box in the webpage an alert will come up displaying that id. I have tried many things, but nothing seems to work. I'm a beginner, so I feel at this point there just must be something that I don't know how to do.
constructor function:
function Box (boxId, name, color, number, coordinates) {
this.boxId = boxId;
this.name = name;
this.color = color;
this.number = number;
this.coordinates = coordinates;
}
global variables:
var boxes = [];
var counter = 0;
var boxId = 0;
init function:
window.onload = init;
function init() {
var generateButton = document.getElementById("generateButton");
generateButton.onclick = getBoxValues;
var clearButton = document.getElementById("clearButton");
clearButton.onclick = clear;
}
function to get values and create new boxes:
function getBoxValues() {
var nameInput = document.getElementById("name");
var name = nameInput.value;
var numbersArray = dataForm.elements.amount;
for (var i = 0; i < numbersArray.length; i++) {
if (numbersArray[i].checked) {
number = numbersArray[i].value;
}
}
var colorSelect = document.getElementById("color");
var colorOption = colorSelect.options[colorSelect.selectedIndex];
var color = colorOption.value;
if (name == null || name == "") {
alert("Please enter a name for your box");
return;
}
else {
var newbox = new Box(boxId, name, color, number, "coordinates");
boxes.push(newbox);
counter++;
var boxId = counter;
}
addBox(newbox);
var data = document.getElementById("dataForm");
data.reset();
}
function that adds boxes to the page:
function addBox(newbox) {
for (var i = 0; i < newbox.number; i++) {
var scene = document.getElementById("scene");
var div = document.createElement("div");
div.className += " " + "box";
div.innerHTML += newbox.name;
div.style.backgroundColor = newbox.color;
var x = Math.floor(Math.random() * (scene.offsetWidth-101));
var y = Math.floor(Math.random() * (scene.offsetHeight-101));
div.style.left = x + "px";
div.style.top = y + "px";
scene.appendChild(div);
div.onclick = display;
}
}
function to display alert when box is clicked:
function display(e) {
var a = e.target;
alert(a.counter);
}
function to clear boxes:
function clear() {
var elems = document.getElementsByClassName("box");
for ( k = elems.length - 1; k >= 0; k--) {
var parent = elems[k].parentNode;
parent.removeChild(elems[k]);
}
}
All of the other functions work just fine. I keep running into the id showing up as "undefined" when I click it, or the counter displaying "0" in the console log, for everything I've tried.
You can do it like this.
First, in addBox() embed boxId as an tag's attribute like this:
div.setAttribute('data-boxId', newbox.boxId);
Then in display() you can retrieve it back:
alert(e.target.getAttribute('data-boxId'));
Please tell if you do not prefer this approach and I will post an alternative (closure things).
Edit: Add jsfiddle example http://jsfiddle.net/runtarm/8FJpU/
One more try. Perhaps if you change:
var boxId = counter;
to
boxId = counter;
It will then use the boxId from the outer scope instead of the one defined in the function getBoxValues()