Versuchen, ein Array von Zeichenfolgen 1 nach 1 auszudrucken, wenn eine Schaltfläche geklickt wird

Question

Ich versuche, eine "Tatsache" auf der Seite erscheinen zu lassen, wenn auf eine Schaltfläche geklickt wird. Ich habe die Liste der Fakten in ein Array von Strings mit einer Schleife, die wie unten gezeigt durchlaufen soll.

var textArray = [ 
"<strong>Fact 1:</strong> Sign language is the fourth most used language in the US.", 
"<strong>Fact 2:</strong> Deaf History Month is observed from March 13th to April 15th every year.", 
"<strong>Fact 3:</strong> There are hundreds of sign language dialects in use around the world. Each culture has developed its own form of sign language to be compatible with the language spoken in that country.", 
"<strong>Fact 4:</strong> A form of ASL has been used in the U.S. for over two hundred years.", 
"<strong>Fact 5:</strong> In the United States, many people with hearing impairments communicate by using American Sign Language, also known as ASL. ASL combines hand signs, gestures, and facial expressions to create words and sentences. As many as 500,000 people in the U.S. communicate using ASL. Not all ASL users are hearing impaired. Some are family members, friends, or teachers of people with hearing impairments.", 
"<strong>Fact 6:</strong> You might think that modern-day ASL originated in England, but it did not. It came from France. England has its own version of sign language that is very different from ASL. An American who only knows ASL will have a hard time communicating with someone from England who only knows Modern British Sign Language. But a person using ASL has a good chance of being able to communicate with a person using French Sign Language - even if they don't speak French!", 
"<strong>Fact 7:</strong> People with hearing impairments have been using signed languages for a very long time. In the 18th century in France, some people did not think children with hearing impairments should go to school. They thought that since they could not speak or hear, they would be unable to learn. A man with a hearing impairment named Pierre Desloges believed these people were wrong. He wrote a book that described the signed language used by people with hearing impairments in Paris. This book helped to change the minds of many people. Soon there were schools in France for children with hearing impairments. ", 
"<strong>Fact 8:</strong> Ludvig van Beethoven was a German composer and pianist. He started going deaf at the age of 28 and by age 49 he could no longer hear. He continued to get worse but went on composing music. Beethoven died in 1857 when he was 57 years-old.", 
"<strong>Fact 9:</strong> There are hundreds of sign language dialects in use around the world. Each culture has developed its own form of sign language to be compatible with the language spoken in that country.", 
"<strong>Fact 10:</strong> Babies can communicate physically 6-8 months  prior to communicate verbally." 


]; 

function factClick(){ 

var arrayLength = textArray.length; 
for (var i = 0; i < arrayLength; i++) { 
    document.getElementById("factID").innerHTML = textArray[i]; 

    } 
} 

Und es soll aus drucken, wenn Sie die Taste auf meiner Seite (http://thecodingninja.com/muslim/facts.php) geklickt wird.

-Code unten

<script src="facts.js"></script> 

<center> 
<p id="factID" style="color:white;"> test <p> 
<button onclick="factClick()">Change Text</button> 

</center> 

Warum nicht funktioniert es?

Sie können eine Antwort in jQuery geben, wenn es einfacher ist.

Answer 1

Was hat sich geändert:

• css Farbe jetzt schwarz (weiß auf weiß zeigen, nicht auf.)
• Zähler außerhalb Funktion, weil das Element bestehen bleiben muss.
• Gegenkorrektur.
• daher keine for-Schleife.

var textArray = [ 
 
     "<strong>Fact 1:</strong> Sign language is the fourth most used language in the US.", 
 
     "<strong>Fact 2:</strong> Deaf History Month is observed from March 13th to April 15th every year.", 
 
     "<strong>Fact 3:</strong> There are hundreds of sign language dialects in use around the world. Each culture has developed its own form of sign language to be compatible with the language spoken in that country.", 
 
     "<strong>Fact 4:</strong> A form of ASL has been used in the U.S. for over two hundred years.", 
 
     "<strong>Fact 5:</strong> In the United States, many people with hearing impairments communicate by using American Sign Language, also known as ASL. ASL combines hand signs, gestures, and facial expressions to create words and sentences. As many as 500,000 people in the U.S. communicate using ASL. Not all ASL users are hearing impaired. Some are family members, friends, or teachers of people with hearing impairments.", 
 
     "<strong>Fact 6:</strong> You might think that modern-day ASL originated in England, but it did not. It came from France. England has its own version of sign language that is very different from ASL. An American who only knows ASL will have a hard time communicating with someone from England who only knows Modern British Sign Language. But a person using ASL has a good chance of being able to communicate with a person using French Sign Language - even if they don't speak French!", 
 
     "<strong>Fact 7:</strong> People with hearing impairments have been using signed languages for a very long time. In the 18th century in France, some people did not think children with hearing impairments should go to school. They thought that since they could not speak or hear, they would be unable to learn. A man with a hearing impairment named Pierre Desloges believed these people were wrong. He wrote a book that described the signed language used by people with hearing impairments in Paris. This book helped to change the minds of many people. Soon there were schools in France for children with hearing impairments. ", 
 
     "<strong>Fact 8:</strong> Ludvig van Beethoven was a German composer and pianist. He started going deaf at the age of 28 and by age 49 he could no longer hear. He continued to get worse but went on composing music. Beethoven died in 1857 when he was 57 years-old.", 
 
     "<strong>Fact 9:</strong> There are hundreds of sign language dialects in use around the world. Each culture has developed its own form of sign language to be compatible with the language spoken in that country.", 
 
     "<strong>Fact 10:</strong> Babies can communicate physically 6-8 months prior to communicate verbally." 
 
    ], 
 
    i = 0; 
 

 
function factClick(){ 
 
    document.getElementById("factID").innerHTML = textArray[i]; 
 
    i++; 
 
    i %= textArray.length; // keep in right range 
 
}

<center> 
 
<p id="factID" style="color:black;"> test <p> 
 
<button onclick="factClick()">Change Text</button> 
 
</center>

Answer 2

Sie verwenden eine for hier Schleife. Denken Sie daran, dass eine for Schleife auf einmal ausgeführt wird. Sie drucken also alle Fakten einzeln aus, aber alles geschieht im Handumdrehen. Bis Sie das Ende der Schleife erreicht haben, haben Sie alle Fakten ausgedruckt, und die letzte, die gedruckt wurde, ist alles, was übrig bleibt.

Wenn Sie eine neue Tatsache ausdrucken möchten, und tun Sie es in der Reihenfolge, und drucken Sie nur eine neue Tatsache jedes Mal, wenn Sie die Taste drücken, dann wollen Sie keine for Schleife hier. Stattdessen möchten Sie einen einfachen Zähler haben, erhöhen Sie es jedes Mal, wenn die Taste gedrückt wird, und verwenden Sie das, um zu verfolgen, welche Tatsache angezeigt werden sollte.

var textArray = []; // your array, imagine it's full of 10 facts 
var counter = 0; // use this to track which fact to display 
function fastClick(){ 
    document.getElementById("factID").innerHTML = textArray[counter]; 
    counter++; 
    if(counter > textArray.length - 1){ 
     counter = 0; // make sure counter isn't bigger than array length 
    } 
}