innerHTML

[franco_da_VC]

Saluti a tutti,

ritorno con un problema legato all'uso di "innerHTML".

Dunque, devo visualizzare all'interno di una pagina html il valore di una variabile da me precedentemente settata tramite delle procedure javascript, ma mi si presenta un problema che non sono riuscito a dirimere.

La variabile di cui parlo:

anno$

viene settata ad un valore qualsiasi per esempio "2003" poi tramite l'istruzione:

document.getElementById("data_v").innerHTML=anno$;

dovrebbe essere possibile visualizzare all'interno della mia pagina la cifra 2003, ovvio che la stringa "data_v" è l'id che io uso nel tag relativo alla visualizzazione della varibile stessa, il problema e che l'istruzione da me riportata mi restituisce il seguente errore:

document.getElementById("data_v") has no properties

o perlomeno così dice la console di firefox.
Qualcuno sa darmi delucidazioni?

Bye by AFo

[Xinod]

ciao Franco
sicuro che l' elemento con id="data_v" sia gia' stato definito nell' html al momento del richiamo della funzione?

hai lo stesso problema se la variabile dovesse chiamarsi solo "anno"?

l' elemento e' inizialmente vuoto?
avrasti lo stesso problema se invece contenesse almeno uno spazio prima della chiusura?

<div id="data_v"> </div>

[franco_da_VC]

Grazie xinod,

l'elemento con id="data_v" e comunque settato con l'espressione che citavi tu:

<div id="data_v"> </div>

solo che nello stesso tag vado a settare altre cose:

<div style="font-size:16pt;" id="data_v"></div>

ma non penso che dia problemi.
Veramente una variabile anno esiste nel mio listato e mi serve per eseguire un'incremento della data, chiaramente essa contiene un numero, forse per una mia errata convinzione ho preferito passare il numero in una variabile dichiarata come stringa vuota in questo modo:

var min=2002;
var mag=2004;
var anno=min;
var anno$=""; // variabile da eliminare (probabilmente)
......omissis......
anno$=anno;
document.getElementById("data_v").innerHTML=anno$;

Come vedi l'elemento parte settato comunque con un valore

[franco_da_VC]

Accidenti ho apportato modifiche al listato che vi avevo postato prima, ma non riesco a capire perche non ci cavo un bel niente.

Ora mi pare molto più corretto come definizioni, ma il solito errore non l'ho ancora tolto: continuo ad avere la scritta

document.getElementById("data_v") has no properties.

Ora il listato appare così:

var anno=2002;
t_anno=new String(anno);
document.getElementById("data_v").innerTEXT=t_anno .value;

Naturalmente nel punto ove dovrebbe apparire la scritta vi è questo codice html:

<div style="font-size:16pt;" id="data_v"> </div>

Chi ne sa qualcosa? Xinod puoi darmi ancora un'occhiata?
Vi ringrazio!!!

[supermac]

ho lo stesso problema tuo

il getElementById restituisce un oggettino di tipo elements del quale non sono in grado di leggere/settare le proprietà

a questo link ho trovato info interessanti ma non risolutive
http://www.mozilla.org/docs/dom/domr...rtIX.html#IX_A

[franco_da_VC]

Ciao a tutti,

finalmente ho risolto questo annoso problema, il costrutto finale corretto (o almeno quello funzionante) è questo:

var anno=min;

dove min contiene il valore iniziale della variabile (es. 2002)
Come vedete sono sparite sia la dichiarazione dell'oggetto, sia il passaggio alla variabile alfanumerica. In poche parole va bene inserire la variabile numerica direttamente.

Il blocco document.getElement.... etc. ora è diventato così:

document.getElementById("data_v").innerHTML=anno;

Ed il blocco all'interno del listato html rimane quello di sempre cioe:

<div style="font-size:16pt;" id="data_v"> </div>

Ma la cosa più importante è questa: lo script su cui riflettiamo non è all'interno di una funzione per cui parte in automatico alla lettura della pagina. Ora diventa importante la posizione in cui tutto ciò viene scritto! Il blocco document.get.... non deve trovarsi prima della dichiarazione del listato html altrimenti il tag non viene letto e l'id non viene definito; ecco perche si generava l'errore che non riuscivo a togliere.

Come ho risolto? semplice la rica document.get.... l'ho inserita in fondo al listato html prima della chiusura del tag body ed il tutto funziona egregiamente.

Vi allego la pagina html finale che ho ottenuto per esemplificare meglio il tutto.

[Xinod]

Originariamente inviato da Xinod
sicuro che l' elemento con id="data_v" sia gia' stato definito nell' html al momento del richiamo della funzione?

[franco_da_VC]

Urgh! vi avevo scritto che avevo allegato il file per meglio esemplificare il tutto ma evidentemente ho fatto qualche errore durante il confezionamento dell precedente intervento, ragion per cui ora ve lo inserisco qui di seguito
----------------------8<-------------------8<----------------
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ALBUM FOTOGRAFICO</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="GENERATOR" content="Quanta Plus">
<style type='text/css'>

BODY {
color: #d0ffd0;
background: #333333;
font-family: Sans Serif, sans-serif;
font-size: 14pt;
margin: 4%;
}

H1 {
color: #d0ffd0;
}

TABLE {
text-align: center;
margin-left: auto;
margin-right: auto;
}

TD {
color: #d0ffd0;
padding: 1em
}

IMG {
border: 1px solid #d0ffd0;
}

</style>
</head>
<body>
<script language="JavaScript1.2">
<!--

arrow_r_on = new Image(); arrow_r_on.src="thumbs/arrow_r_L.gif";
arrow_r_off = new Image(); arrow_r_off.src="thumbs/arrow_r_U.gif";
arrow_r_gray = new Image(); arrow_r_gray.src="thumbs/arrow_r_gray.gif";
arrow_l_on = new Image(); arrow_l_on.src="thumbs/arrow_l_L.gif";
arrow_l_off = new Image(); arrow_l_off.src="thumbs/arrow_l_U.gif";
arrow_l_gray = new Image(); arrow_l_gray.src="thumbs/arrow_l_gray.gif";
var min=2002;
var mag=2004;
var anno=min;

function down(){
if (anno>min){
anno=anno-1;
}
if (anno==min){
document ["arrow_l_"].src=arrow_l_gray.src;
document ["arrow_r_"].src=arrow_r_off.src;
}
else {
document ["arrow_r_"].src=arrow_r_off.src;
}
pagina="home"+anno+".html";
parent.main.location.href=pagina;
document.getElementById("data_v").innerHTML=anno;
}

function up(){
if (anno<mag){
anno=anno+1;
}
if (anno==mag){
document ["arrow_l_"].src=arrow_l_off.src;
document ["arrow_r_"].src=arrow_r_gray.src;
}
else {
document ["arrow_l_"].src=arrow_l_off.src;
}
pagina="home"+anno+".html";
parent.main.location.href=pagina;
document.getElementById("data_v").innerHTML=anno;
}


function rollOver(imgName){
if (imgName=="arrow_l_"){
if (anno!=min){
imgOn = eval(imgName+"on.src");
document [imgName].src=imgOn;
}
}
else {
if (anno!=mag){
imgOn = eval(imgName+"on.src");
document [imgName].src=imgOn;
}
}
}

function rollOut(imgName){
if (imgName=="arrow_l_"){
if (anno!=min){
imgOff = eval(imgName+"off.src");
document [imgName].src=imgOff;
}
}
else {
if (anno!=mag){
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
}

//-->
</script>
<h1>ALBUM FOTOGRAFICO Anni: 2002 - 2004</h1>


<table width="100%" border="0">
<tr>
<td width="50%" align="left" valign="top" style="padding: 0em;">
Numero di capitoli: 36 - immagini: 2254

Creazione: gioved&#236; 03 marzo 2005</p>

</td>
<td width="50%" valign="center" style="padding: 0em;">
<table width="100%" border="0">
<tr>
<td width="20%" align="left" style="padding: 0em;">
[img]thumbs/arrow_l_gray.gif[/img]
</td>
<td width="60%" valign="top" style="padding: 0em;">
<div style="font-size:10pt;">anno</div>
<div style="font-size:16pt;" id="data_v"> </div>
</td>
<td width="20%" align="right" style="padding: 0em;">
[img]thumbs/arrow_r_U.gif[/img]
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr size="3">
<script language="JavaScript1.2">
<!--
document.getElementById("data_v").innerHTML=anno;
//-->
</script>
</body>
</html>

Come vedete ora il tutto funziona perche il costrutto document.get elem.... compare nelle due funzione "up" e "down" che vengono attivate su pressione degli appositi pulsanti, quindi a lettura ultimata e quindi con id="data_v" settato, e compare in fondo al listato html, quest'ultimo verrà attivato autoamticamente durante la lettura della pagina, ma quando la riga che contiene id="data_v" è gia stata interpretata, grazie a tutti per il feedback.