2015-07-27 15 views
5

Sto provando a creare un pulsante che quando viene premuto restituisce quante volte è stato cliccato e ogni volta che si fa clic sul pulsante;pulsante contatore e nuovo pulsante

un nuovo pulsante viene aggiunto alla pagina (È un nuovo pulsante quindi non è stato ancora fatto clic) Ogni pulsante aggiunto alla pagina deve avere la stessa interazione del primo pulsante. Facendo clic incrementa il suo valore e crea il nuovo pulsante sulla pagina.

Finora ho trovato il pulsante contatore, ma non riesco a aggiungere il pulsante sulla pagina. Si prega di aiuto ...

var clicks = 0; 
function onClick(){ 
    clicks +=1; 
    document.getElementById("button").innerHTML= "I've been clicked " +clicks + 
" times" ; 
}; 
+2

http://jsfiddle.net/arunpjohny/a9efyju7/2/ –

+0

ho dimenticato di menzionare l'ultima parte troppo ... E quando il lavoro di controllo, fare in modo che dopo il n pulsante clic sulla pagina, la somma di tutti i pulsanti contatori dovrebbe essere n, e ci dovrebbe essere n + 1 pulsante sulla pagina. –

+0

Penso che stia succedendo nel campione sopra –

risposta

0

Il createElement() metodo sarà probabilmente il modo più semplice per andare ... http://www.w3schools.com/jsref/met_document_createelement.asp

var clicks = 0; 
var button = 0; 
function onClick(){ 
    clicks +=1; 
    button++ 
    document.getElementById("button").innerHTML= "I've been clicked " +clicks + 
" times" ; 
    var newButton = document.createElement("button"+button); 
    document.body.appendChild(newButton); 
    document.getElementById("button"+button).innerHTML = "I Have Not Been Clicked Yet" 
}; 
+0

Non fidarti mai di w3schools; è pieno di errori. E dovresti fornire esempi di codice invece di link. – Raptor

+0

Volevo fare clic sul commento non rispondere ... quindi mi scuso per quello. Tuttavia, per qualcosa di così semplice, difficilmente importa da dove viene. – ThatTechGuy

+1

Grazie ThatTechGuy! –

0

Qui `s il mio codice! Spero che ti aiuta ...

<!DOCTYPE html> 
<html lang = 'es'> 
    <head> 
     <title> MY TEST </title> 
     <meta charset = 'utf-8'> 

    </head> 
    <body id = 'body'> 
     <input type = 'button' value = 'Clicked 0 times' id = 'Button' data-clicks = 0 ></input> 

     <script> 
      var firstButton = document.getElementById('Button'); 
      firstButton.addEventListener('click', createAndAdd); 

      function createAndAdd(e){ 
       var button = e.target; 

       // Reference to the data-clicks attribute 
       var clicksAttribute = button.getAttribute('data-clicks'); 

       var clicksAttributeValue = parseInt(clicksAttribute);   
       button.value = 'Clicked ' + (clicksAttributeValue + 1) + ' times'; 

       clicksAttribute = clicksAttributeValue + 1; 
       button.setAttribute('data-clicks', clicksAttribute); 

       //Creating and adding the attributes of the new button. 
       newInputButton = document.createElement('input'); 
       newInputButton.setAttribute('type', 'button'); 
       newInputButton.setAttribute('value', 'Clicked 0 times'); 
       newInputButton.setAttribute('id', 'Button'); 
       newInputButton.setAttribute('data-clicks', 0); 

       //Adding the event Listener to the new button 
       newInputButton.addEventListener('click', createAndAdd) 

       //Adding the new button to the body 
       var body = document.getElementById('body'); 
       body.appendChild(newInputButton); 

      } 
     </script> 
    </body> 
</html> 
Problemi correlati