Javascript HTML使用onclick添加額外的文本行

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');"

問題來自“ this”。

您正在使用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];

演示小提琴

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 個解決方案

解決方案1
0 2014-07-24 20:30:35

解決方案2
0 2014-07-24 20:32:46

解決方案3
0 2014-07-24 20:33:53

解決方案4
0 已采納 2014-07-24 20:35:57

解決方案5
0 2014-07-24 20:54:52

Javascript HTML使用onclick添加額外的文本行

問題描述

5 個解決方案

解決方案1 0 2014-07-24 20:30:35

解決方案2 0 2014-07-24 20:32:46

解決方案3 0 2014-07-24 20:33:53

解決方案4 0 已采納 2014-07-24 20:35:57

解決方案5 0 2014-07-24 20:54:52

解決方案1
0 2014-07-24 20:30:35

解決方案2
0 2014-07-24 20:32:46

解決方案3
0 2014-07-24 20:33:53

解決方案4
0 已采納 2014-07-24 20:35:57

解決方案5
0 2014-07-24 20:54:52