[résolu] GetElementById, oui mais comment ??

Bonsoir,
J'ai installé (enfin copier-coller..) un script sur une page qui me permet de passer d'une image à une autre et de choisir celle que je veux grâce à un menu déroulant.

Ca marche bien, mais il me faudrait supprimer les attributs "name", pour laisser juste des ID, afin que ma page soit valide.

Si j'ai bien compris, c'est possible en modifiant le script et en ajoutant des "getElementById". Seulement je suis un gros nul et en essayant de différentes façons, ça ne marche pas

Les "name" à supprimer

<form id="formname" name="formname" >
	<select name="slide" id="slide" onchange="change();" size="1">
        <option value="1.jpg" selected="selected">image 1</option>
        <option value="2.jpg">image 2</option>               
 </select>
	  
	<input type="button" onclick="first();" value="accueil"  />  
	<input type="button" onclick="previous();" value="retour" />
	<input type="button" onclick="next();" value="suite" />         
	
	<img  src="1.jpg" name="show" id="show"  alt="" />
   
</form>

et le script à modifier :

var current = 0;

function next(){ // forward one image
if(document.formname.slide[current+1]){
document.images.show.src = document.formname.slide[current+1].value;
document.formname.slide.selectedIndex = ++current;}
else{first();}}

function previous(){ // back on image
if((current-1) >= 0){
document.images.show.src = document.formname.slide[current-1].value;
document.formname.slide.selectedIndex= --current;}
else{last();}}

function first(){ // jump to first image
current=0;
document.images.show.src = document.formname.slide[0].value;
document.formname.slide.selectedIndex=0;}

function last(){ // this is jump to last image
current=(document.formname.slide.length-1);
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex=current;}

function ap(text){ // this controls the auto-play and/or auto-stop
document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate();}

function change(){ // this is for the pulldown menu
current=document.formname.slide.selectedIndex;
document.images.show.src = document.formname.slide[current].value;}

function rotate() {
if (document.formname.slidebutton.value == "Stop") {
current = (current == document.formname.slide.length-1) ? 0 : current+1;
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex = current;
window.setTimeout("rotate()", 5000);}}

comment dois-je m'y prendre ?
Modifié par Alan (21 Jan 2006 - 13:46)

Essaie ça:

<form id="formname">
    <select id="slide" onchange="change();" size="1">
        <option value="1.jpg" selected="selected">page 1</option>
        <option value=".jpg">page 2</option>               
    </select>

    <input type="button" onclick="first();" value="accueil"  />  
    <input type="button" onclick="previous();" value="retour" />
    <input type="button" onclick="next();" value="suite" />         
    <img  src="1.jpg" id="show"  alt="" />
</form>

var current = 0;
var formname = document.getElementById('formname');
var slide = document.getElementById('slide');
var show = document.getElementById('show');

function next(){ // forward one image
  if(document.formname.slide[current+1]){
    document.images.show.src = document.formname.slide[current+1].value;
    document.formname.slide.selectedIndex = ++current;}
  else{first();}}

function previous(){ // back on image
  if((current-1) >= 0){
    document.images.show.src = document.formname.slide[current-1].value;
    document.formname.slide.selectedIndex= --current;
  }
  else{
    last();
  }
}

function first(){ // jump to first image
  current=0;
  document.images.show.src = document.formname.slide[0].value;
  document.formname.slide.selectedIndex=0;
}
function last(){ // this is jump to last image
  current=(document.formname.slide.length-1);
  document.images.show.src = document.formname.slide current .value;
  document.formname.slide.selectedIndex=current;
}

function ap(text){ // this controls the auto-play and/or auto-stop
  document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
  rotate();
}

function change(){ // this is for the pulldown menu
  current=document.formname.slide.selectedIndex;
  document.images.show.src = document.formname.slide current .value;
}

function rotate() {
  if (document.formname.slidebutton.value == "Stop") {
    current = (current == document.formname.slide.length-1) ? 0 : current+1;
    document.images.show.src = document.formname.slide current .value;
    document.formname.slide.selectedIndex = current;
    window.setTimeout("rotate()", 5000);
  }
}

Je n'ai pas essayé mais pour avoir un element par son id il suffit de faire document.getElementById('id_element');

Merci,
En fait, ça posait problème seulement en enlevant le "name" de la balise <form>, pour le reste ça passait.

J'ai essayé comme tu m'as indiqué, ça n'a pas fonctionné.

Pour que ça fonctionne, j'ai remplacé tous les "document.formname" par des "document.getElementById('formname')"


C'est pas très économique, mais en essayant avec une variable, je n'y suis pas arrivé. Je tenterai à nouveau demain. Ca me suffit déjà puisque ça marche ainsi, mais bon, autant faire les choses plus proprement..

var current = 0;

function next(){ // forward one image
if(document.getElementById('formname').slide[current+1]){
document.images.show.src = document.getElementById('formname').slide[current+1].value;
document.getElementById('formname').slide.selectedIndex = ++current;}
else{first();}}

function previous(){ // back on image
if((current-1) >= 0){
document.images.show.src = document.getElementById('formname').slide[current-1].value;
document.getElementById('formname').slide.selectedIndex= --current;}
else{last();}}

function first(){ // jump to first image
current=0;
document.images.show.src = document.getElementById('formname').slide[0].value;
document.getElementById('formname').slide.selectedIndex=0;}

function last(){ // this is jump to last image
current=(document.getElementById('formname').slide.length-1);
document.images.show.src = document.getElementById('formname').slide[current].value;
document.getElementById('formname').slide.selectedIndex=current;}

function ap(text){ // this controls the auto-play and/or auto-stop
document.getElementById('formname').slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate();}

function change(){ // this is for the pulldown menu
current=document.getElementById('formname').slide.selectedIndex;
document.images.show.src = document.getElementById('formname').slide[current].value;}

function rotate() {
if (document.getElementById('formname').slidebutton.value == "Stop") {
current = (current == document.getElementById('formname').slide.length-1) ? 0 : current+1;
document.images.show.src = document.getElementById('formname').slide[current].value;
document.getElementById('formname').slide.selectedIndex = current;
window.setTimeout("rotate()", 5000);}}

Pour la variable, j'ai essayé comme ça :

var f = document.getElementById('formname');

en remplaçant tous les /document.getElementById('formname')/ par des /f/, mais sans succès

Bonne soirée et merci

***

EDIT: J'ai marqué ce sujet comme résolu puisque j'ai obtenu ce que je voulais, même si c'est pas (encore) de la plus belle manière
Modifié par Alan (21 Jan 2006 - 13:48)