Javascript html displaying

Javascript html displaying

本文关键字：displaying html Javascript      更新时间：2023-09-26

我想像以前一样重新显示我的页面。(同样的布局)。我得到了一个h1标题当我点击那个标题时它会给p1添加字符串。当我点击p1时，它会选择一个随机的字符串来删除。然后，它将不得不重新显示相同的页面，但只删除一行字符串。我的问题是，它删除了我的h1标题和画布我创建时，我点击p1。

<html>
<head>
    <style>
        #canvas{
            margin: 5px;
            padding: 5px;
            background: green;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <script>
    var maFonction=function(elem,event,couleur)
    {
        elem.style.color=couleur;
    }
    var insertText=function( text)
    {
        var elem=text;
        elem.innerHTML+=text;
    }
    var newtable=new Array();
    var tablenew= new Array();
    newtable[0]="Ce petit chien est tres drole.";
    newtable[1]="Il est blanc, avec une oreille blanche et une oreille noire.";
    newtable[2]="Il a aussi le bout de la queue noir.";
    newtable[3]="Il a une oreille en l'air et une oreille en bas";
    newtable[4]="Oui, il est tres drole.";
    newtable[5]="Ce petit chien est aussi tres gai.";
    newtable[6]="Il joue toute la journee.";
    newtable[7]="C'est un vrai petit diable de toutou.";
    newtable[8]="Paf joue à la balle avec Theo et avec Emilie. ";
    newtable[9]="Quand la balle tombe, Paf l'attrape.";
    newtable[10]="Il se sauve avec la balle ou bien il la pousse avec sa patte et il court.";
    newtable[11]="Quand Emilie saute à la corde, Paf saisit la corde, et tire; il se sauve ou il l'emporte.";
    newtable[12]="Quand Theo joue aux billes, Paf joue avec lui.";
    newtable[13]="Avec sa patte, il gratte le trou, il fait sauter les billes, il les fait rouler de tous cotes.";
    newtable[14]="Theo se fache un peu. ";
    newtable[15]=" Mais Paf s'amuse si bien et il est si drole, que Theo finit par rire de tout son coeur.";
    newtable[16]="HISTOIRE: http://www.francaisfacile.com/exercices/exercice-francais-2/exercice-francais-55950.php";
    var line = 0;
    var clickSurSection2 = function(newtable,element)
    {
        document.getElementById("story").innerHTML += "<br>"+ newtable[line];
        tablenew.push(newtable[line]);
        line++;
    }
    var pushTable=function(tablenew)
    {
        var theindex=Math.floor(Math.random()*tablenew.length);
        tablenew.splice(theindex);
        for(var i=0;i<tablenew.length;i++)
        {
            document.write(tablenew[i]+" </br>");
        }
    }
    </script>
    <h1 onmouseover="maFonction(this,event,'red');"
        onmouseout="maFonction(this,event,'blue');"
        onclick="clickSurSection2(newtable,this);">
            Cliquez moi pour en savoir plus
    </h1>
    <div id="story">
        <p1 onclick="pushTable(tablenew);">Il y a a la maison un petit chien.</p1>
    </div>
    <canvas id="canvas" width="600" height="300"></canvas>
</body>
<html>

如果我理解正确的话，这就是你要找的东西:

HTML: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1 id="heading" onmouseover="maFonction('red');"
        onmouseout="maFonction('blue');"
        onclick="clickSurSection2(newtable,this);">
            Cliquez moi pour en savoir plus
    </h1>
    <div id="story">
        <p class="paragraph" onclick="pushTable();">Il y a a la maison un petit chien.</p>
    </div>
    <canvas id="canvas" width="600" height="300"></canvas>
</body>
</html>

CSS保持不变

JS: 

var heading = document.getElementById('heading');
var story = document.getElementById("story");
var paragraph = document.getElementsByClassName('paragraph');
var newtable=[];
newtable[0]="Ce petit chien est tres drole.";
newtable[1]="Il est blanc, avec une oreille blanche et une oreille noire.";
newtable[2]="Il a aussi le bout de la queue noir.";
newtable[3]="Il a une oreille en l'air et une oreille en bas";
newtable[4]="Oui, il est tres drole.";
newtable[5]="Ce petit chien est aussi tres gai.";
newtable[6]="Il joue toute la journee.";
newtable[7]="C'est un vrai petit diable de toutou.";
newtable[8]="Paf joue à la balle avec Theo et avec Emilie. ";
newtable[9]="Quand la balle tombe, Paf l'attrape.";
newtable[10]="Il se sauve avec la balle ou bien il la pousse avec sa patte et il court.";
newtable[11]="Quand Emilie saute à la corde, Paf saisit la corde, et tire; il se sauve ou il l'emporte.";
newtable[12]="Quand Theo joue aux billes, Paf joue avec lui.";
newtable[13]="Avec sa patte, il gratte le trou, il fait sauter les billes, il les fait rouler de tous cotes.";
newtable[14]="Theo se fache un peu. ";
newtable[15]=" Mais Paf s'amuse si bien et il est si drole, que Theo finit par rire de tout son coeur.";
newtable[16]="HISTOIRE: http://www.francaisfacile.com/exercices/exercice-francais-2/exercice-francais-55950.php";
var tablenew= [];
tablenew[0] = paragraph[0].innerText;
var line = 0;
function maFonction(couleur){
  heading.style.color=couleur;
}
function insertText(text){
  var elem=text;
  elem.innerHTML+=text;
}
function clickSurSection2(newtable,element){
  var newParagraph = '<p class="paragraph" onclick="pushTable();">'+newtable[line]+'</p>';
  story.innerHTML += newParagraph;
  tablenew.push(newtable[line]);
  line++;
}
function pushTable(){
  var theindex=Math.floor(Math.random()*tablenew.length);
  tablenew.splice(theindex, 1);
  var newParagraph;
  story.innerHTML = '';
  for(var i=0;i<tablenew.length;i++){
    newParagraph = '<p class="paragraph" onclick="pushTable();">'+tablenew[i]+'</p>';
    story.innerHTML += newParagraph;
  }
}

下面是jsBin示例的链接:http://jsbin.com/gicig/3/edit

相关文章：