19  1920  gits 5,390
Expert Mod 4TB
what is the exact problem that you have with that shown code?
I am unable to type the correct format line in the function Display_Table() where I try to use the onclick command to insert the name of the file in my directory that replaces the table after the cell is clicked. I am new at using onclick in javascript.
gits 5,390
Expert Mod 4TB
nothing special with 'onclick' - what you do is assigning an event handler to an element - in your case a td-element with it, so that in case the element is clicked the assigned function is called.
what you want to do is somehow clear - but what exactly is not working or throws an error? i suggest that you open the developer tools of your browser and look at the errors there. so far when clicking a td you would call the function DisplayConstellations with an integer determined by your count as you construct the table. So potential calls after that are: - DisplayConstellations(0)
-
...
-
DisplayConstellations(87)
is that what you want to achieve?
yes exactly that but when I click on the cell nothing happens. I can't help feeling that the quote marks are in the wrong place whee I am inserting the onclick so that is why I am on here.
gits 5,390
Expert Mod 4TB
well - onclick is an attribute (more a property) of the node you want the event to be called on. so you have to fix line 137 in your code: - content += "<td onclick='DisplayConstellations(" + count ....
yes I realize that is the troble line of code but there are so many quotes involved that I get confused what gets a quote and what doesn't. I have four directories filled with tryitout functions in html and javascript that I have no idea anymore as what I am doing.
gits 5,390
Expert Mod 4TB
look close at the fixed line i posted above - between the td and onclick - thats whats wrong in your line
I ended up with this but it only created empty cells. - content += "<td onclick='DisplayConstellations(" + count + ")'>" + ConName[count] + "</td>";
- function Display_Table(){
-
var numOfCells = 88; columns = 8;
-
rows = Math.ceil(numOfCells / columns), content = "", count = 0;
-
content = "<table border='1' cellspacing='1' cellpadding='5'>";
-
for (r = 0; r < rows; r++) {
-
content += "<tr>";
-
for (c = 0; c < columns; c++) {
-
content += "<td onclick='DisplayConstellations(" + count + ");'>" + ConName[count] + "</td>";
-
if (count == numOfCells)break;
-
count++;
-
}
-
content += "</tr>";
-
}
-
content += "</table>";
-
john.document.body.innerHTML = content; // insert `content` into iframe
-
-
}
gits 5,390
Expert Mod 4TB
if you only have empty cells you need to check:
since that is what you use to get the content for the cells from.
I had to go back to using content += "<td><a href= 'javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>"; since the onclick didn't work. I right clicked with the mouse button and selected copy what was in the cell and it said javascript:DisplayConstellations(0) and I still can;t get the function DisplayConstellation to display in the iframe to replace the table.
 gits 5,390
Expert Mod 4TB
here is a reduced slightly modified and working example of your code with the onclick-handler: - <html>
-
-
<script type="application/javascript">
-
-
function Display_Table(){
-
-
var numOfCells = 88;
-
var columns = 8;
-
var rows = Math.ceil(numOfCells / columns);
-
var content = "";
-
var count = 0;
-
-
content = "<table border='1' cellspacing='1' cellpadding='5'>";
-
-
for (r = 0; r < rows; r++) {
-
content += "<tr>";
-
-
for (c = 0; c < columns; c++) {
-
content += "<td onclick='DisplayConstellations(" + count + ");'>" + count + "</td>";
-
count++;
-
}
-
-
content += "</tr>";
-
}
-
content += "</table>";
-
-
document.body.innerHTML = content;
-
}
-
-
function DisplayConstellations(p) { console.log(p) };
-
-
</script>
-
-
<body onload="Display_Table()">
-
-
</body>
-
-
</html>
you need to make sure that the DisplayConstellations-method is working as you intend it to work - to me it looks a bit weird - you use a trim-, left- and right-function there and whatnot - its impossible to know what those methods do and whether they work right - since those are no native methods.
I have the menu to load Display_Table() and the iframe receives the table at the end of the function so without including the iframe's name in the document.body.innerHTML= content the table won't go into the iframe. removing the name of the constellation where you put count won't tell the user what constellation to click on. As far as the left right function go they have been in this since 2001
gits 5,390
Expert Mod 4TB
well - what i did post before was just an example to demonstrate how the basic structure you have work with the onclick-events (using count as content as well was just due to put anything there since nowhere here is any information of what ConName contains). Events always work - non working events are not the issue in your case.
we wont be able to solve this problem here that way - you only put bits and pieces up that dont directly relate to each other. If it was only the onclick - its solved up there. Now something completely different doesnt work and the related code is just missing. If you dont want to post the code - at least open the developer console of your browser and post the error-messages that it shows. Writing JavaScript code isn't trial and error - its simple logic and writing syntactically correct as with any other programming language.
I have a working copy here but the output won't go in the iframe and that is what I need. - <!DOCTYPE html>
-
<html lang="en">
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<link rel="stylesheet" href="/w3css/3/w3.css">
-
<head>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/includedata.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone1.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone2.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone3.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone4.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone5.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone6.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone7.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone8.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone9.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone10.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone11.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone12.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCONE.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTWO.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTHREE.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCFOUR.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NONNGC.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars1.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars2.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constell_centers.js"></script>
-
<script type="text/javascript" src="http://localhost/PSC/Documents/Zonesjs/functions.js"></script>
-
</HEAD>
-
<style type="text/css">
-
#div1 {margin:10px;font-size:1.25em;}
-
table {border-collapse:collapse;border:1px solid #7f7f7f;}
-
td {border:1px solid #7f7f7f;width:50px;height:50px;text-align:center;}
-
ul {list-style: none;padding: 0px;margin: 0px;}
-
ul li {display: block;position: relative;float: left;border:1px solid #000}
-
li ul {display: none;}
-
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
-
white-space: nowrap;color: #fff;}
-
ul li a:hover {background: #f00;}
-
li:hover ul {display: block; position: absolute;}
-
li:hover li {float: none;}
-
li:hover a {background: #f00;}
-
li:hover li a:hover {background: #000;}
-
#drop-nav li ul li {border-top: 0px;}
-
</style>
-
-
<body text="#FFFFFF" bgcolor="#000000" >
-
<BODY>
-
-
<!-- Navigation -->
-
<nav class="w3-bar w3-black">
-
<a target="_parent" href="javascript:Display_Table()">Constellations</a>
-
<a href="#band" class="w3-button w3-bar-item">Band</a>
-
<a href="#tour" class="w3-button w3-bar-item">Tour</a>
-
<a href="#contact" class="w3-button w3-bar-item">Contact</a>
-
</nav>
-
-
<script type="text/javascript">
-
function DisplayConstellations(selection){
-
var Z = trim(Left(ZoneOrder[selection],2));
-
var Order = trim(Right(ZoneOrder[selection],2));
-
// document.getElementById('LABEL1').value = Zone[Z-1][Order-1];
-
location ="http://localhost/PSC/Documents/Zonesjs/Zone" + Z + ".html?Order=" + Order;
-
}
-
function Display_Table(){
-
var numOfCells = 88;
-
var columns = 8, rows = Math.ceil(numOfCells / columns), content = "", count = 0;
-
content = "<table border='1' cellspacing='1' cellpadding='5'>";
-
for (r = 0; r < rows; r++) {
-
content += "<tr>";
-
for (c = 0; c < columns; c++) {
-
content += "<td><a HREF='javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>";
-
if (count == numOfCells)break; // here is check if number of cells equal Number of Pictures to stop
-
count++;
-
}
-
content += "</tr>";
-
}
-
content += "</table>";
-
document.body.innerHTML = content; // insert `content` value into body of page
-
}
-
</script>
-
</ul>
-
</li>
-
</body>
-
</html>
I won't be able to give you the programs that are included at the beginning of the function as there are too many to list
I have the utility functions here that include left and right strings. There hasn't been any new problems as there is the only problem is getting the cells to display the documents in the iframe called john. - function ltrim(str) {
-
for(var k = 0; k < str.length && isWhitespace(str.charAt(k)); k++);
-
return str.substring(k, str.length);
-
}
-
function rtrim(str) {
-
for(var j=str.length-1; j>=0 && isWhitespace(str.charAt(j)) ; j--) ;
-
return str.substring(0,j+1);
-
}
-
function trim(str) {
-
return ltrim(rtrim(str));
-
}
-
function isWhitespace(charToCheck) {
-
var whitespaceChars = " \t\n\r\f";
-
return (whitespaceChars.indexOf(charToCheck) != -1);
-
}
-
-
function Val(String){
-
return parseFloat(String);
-
}
-
-
function Left(str, n){
-
if (n <= 0)
-
return "";
-
else if (n > String(str).length)
-
return str;
-
else
-
return String(str).substring(0,n);
-
}
-
function Right(str, n){
-
if (n <= 0)
-
return "";
-
else if (n > String(str).length)
-
return str;
-
else {
-
var iLen = String(str).length;
-
return String(str).substring(iLen, iLen - n);
-
}
-
}
-
function Mid(strInput,intStart,intLength){
-
return strInput.substring(intStart,intLength); }
- var ConName=new Array();
-
ConName[0]="Andromeda";
-
ConName[1]="Antlia";
-
ConName[2]="Apus";
-
ConName[3]="Aquarius";
-
ConName[4]="Aquila";
-
ConName[5]="Ara";
-
ConName[6]="Aries";
-
ConName[7]="Auriga";
-
ConName[8]="Bootes";
-
ConName[9]="Caelum";
-
ConName[10]="Camelopardalis";
-
gits 5,390
Expert Mod 4TB
we need the related code only and make simplified examples - that will even help yourself to get to the point where it has an error.
With the code you currently use - i am pretty sure that the issue is that in your Display_Table method. there you use: - document.body.innerHTML = content;
which replaces the entire existing DOM with the table you create there - so the iframe or any other node that you created before simply doesnt exist anymore. you need to either create the iframe in that function as well or use other DOM manipulation methods to insert the created table into the DOM.
I do not receive any errors as it just won't display the listing from DisplayConstellations. In the previous code it displays the constellation names in the clickable cells but when I click on the cells, the listing does not display in the iframe.
gits 5,390
Expert Mod 4TB
well - now i double checked what you probably try to do by going back to your first post in this thread - since it started to become a bit messy with all this different code.
You obviously create the table in the iframe and you want to assign an eventhandler to the cells that you dynamically created in that iframe. while you have the code for the eventhandler still in the parent window. this is messing up the scope - and when you check the developer console it will tell you something like: - Uncaught ReferenceError: DisplayConstellations is not defined
this is a simple scope issue. each window has its own scope and you cannot access anything globally across them. you need to reference the windows correctly - in your case you would probably be already fine with: - onclick='parent.DisplayConstellations(" + count + ");'
since the method is declared in the parent window thus you would have to access it there.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: nunYa |
last post by:
I am trying to use the DoCmd.TransferText method to export an access table
to
a Tab Delimited Text File. I have put the code behind the onclick event of
a button
and keep getting the error...
|
by: pristo |
last post by:
hello All,
how can i insert unique ID into binary file (that created by compiler)?
(so after compiling i can to identify the src that i use)
thx
|
by: rick |
last post by:
Greetings,
I am trying to generate an html table that looks through the following
xml source and lists links to all of the files (resource-file) and
finds the resource-forms that match those...
|
by: Phillip Vong |
last post by:
Newbie here on ASP.NET
I want to hide a Table with and OnClick event. How do you do that? I'm not
showing an ID when I create a table so how do I tell it to hide it? Is
there a way to add an...
|
by: phil2phil |
last post by:
Hi,
Right now I have a datalist, that renders the following html:
<tr>
<td class="daycss" align="Left" valign="Top"
style="background-color:#EEEEEE;height:20px;">
<div...
|
by: khunohm |
last post by:
I would like to know how to select each item of data from text file transfer to each column in excel file.
source 1..159662
/organism="Candidatus...
|
by: bharathi228 |
last post by:
hi,
iam doing one asp.net application
in gridview i have 3 columns.
the first two column values are coming from database.
the third column is template field.here i have one...
|
by: ram712 |
last post by:
hi,
In sheet each cell is define with pre-defined formula. what i need is to change all the formulae in each cell when i create a copy of these existing worksheets.
|
by: tvnaidu |
last post by:
Getting an error "table insert failed for eventLog" any idea what is the reason?, I have this table called "eventLog", earlier DB comesup, now I saved more data and I am getting the above error when...
|
by: SGKT |
last post by:
Hi, Perl is new to me. I am trying to insert a line to a file. Ex: I have a file (trial.txt), content:
ZZZZ
AAA
DDDD
I am trying to insert CCC below AAA.
MY perl command:
open...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
| |
