Question

我基本上有一个主标题<h1>，我希望它添加一个从我的数组中挑选的新额外行，以便将该行添加到<p1>的末尾。现在，当我点击标题时，我似乎能够在我的标题下添加一个字符串。但是我怎么能这样做，以便在<p1>的末尾添加字符串。 <p1>被认为是故事的第一行，每次点击<h1>都会添加一段额外的故事。

<html>
<head></head>
<style>
#canvas{
                margin: 5px;
                padding 5px;
                background: green;
                border: 1px solid black;
                }
</style>
<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();
    newtable[0]="Salut";
    newtable[1]="Bye";
    newtable[2]="Hey";

    var clickSurSection2 = function(newtable,element) {
        for(var i=0;i<newtable.length;i++){
            element.innerHTML += "<br>Nouveau mot: "+ newtable[i];
        }
    }
</script>
<body>
<h1 onmouseover="maFonction(this,event,'red');" onmouseout="maFonction(this,event,'blue');" onclick="clickSurSection2(newtable,this);">Cliquez moi pour en savoir plus</h1>

<p1>Un jeune garcon vivait dans une petite village dans la montagne.</br></p1>


<canvas id="canvas" width="600" height="300"></canvas>

</body>
<html>

Answer 1

onmouseout="maFonction(this,event,'blue');"

问题来自＆＃34;这个＆＃34;。

您正在使用this作为参数调用maFonction（）。您的案例中this代表h1。因此，它会在h1的末尾添加文字，您感觉它已被添加到p1

的开头

所以你应该给p1这样的ID：

<p1 id="story"> </p1>

然后，从h1调用您的函数，如下所示：

<h1 onmouseover="maFonction(document.getElementById('story'),event,'red');" onmouseout="maFonction(document.getElementById('story'),event,'blue');" onclick="clickSurSection2(newtable,this);">Cliquez moi pour en savoir plus</h1>

Answer 2

http://jsfiddle.net/96v6h/

<body>

<h1 onmouseover="maFonction(this,event,'red');" onmouseout="maFonction(this,event,'blue');" onclick="clickSurSection2(newtable,this);">Cliquez moi pour en savoir plus </h1>

    <p1>Un jeune garcon vivait dans une petite village dans la montagne.</p1>
    <canvas id="canvas" width="600" height="300"></canvas>
    <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();
        newtable[0] = "Salut";
        newtable[1] = "Bye";
        newtable[2] = "Hey";
        var clickSurSection2 = function(newtable, element) {
            for (var i = 0; i < newtable.length; i++) {
                element.innerHTML += "Nouveau mot: " + newtable[i] + " ";
            }
        }
    </script>
</body>

您应该删除换行符（<br>）。工作小提琴就在上面。你也错过了CSS中的分号。

Answer 3

给p1一个id并使用getElementById来获取clickSurSection2函数中的p1元素并将其附加到文本

Answer 4

您可以将您的故事

元素包装到div中，然后在最后添加新行：

<div id="story">
<p1>Un jeune garcon vivait dans une petite village dans la montagne.</p1>
</div>

然后，脚本将是：

document.getElementById("story").innerHTML += "<br>Nouveau mot: "+ newtable[line];

演示Fiddle

Answer 5

我希望我理解你的问题，但尝试用你的问题替换这个功能：

var clickSurSection2 = function(newtable) {

    var newElement = document.createElement("P");
    var pElement = document.getElementById("myId");
    pElement.parentNode.insertBefore(element, pElement.nextSibling);

    for(var i=0;i<newtable.length;i++){
        element.innerHTML += "<br>Nouveau mot: "+ newtable[i];
    }
}

并更改您的

<p1>

到

<p1 id="myId">

和

<h1 onclick="clickSurSection2(newtable,this);">

到

<h1 onclick="clickSurSection2(newtable);">

Javascript html使用onclick添加额外的文本行

5 个答案: