onclickでテキストの行を追加するJavascripthtml

user3268216

基本的にメインタイトルが<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>
lpg

あなたはあなたの物語を包むことができます

要素を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];

デモフィドル

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

JavascriptHTML内にIf / ElseIfステートメントを追加する

分類Dev

'convert'で複数のテキスト行を追加する

分類Dev

行を壊さずにテキストにonclickイベントを追加する

分類Dev

変数の特定の行にテキスト行を追加する

分類Dev

Linuxの特定の行でファイルにテキストを追加する

分類Dev

powershell:テキストを特定の行の後ではなく前に追加する

分類Dev

PowerShellでテキストを検索して行を追加する

分類Dev

pyqt5 Pythonの行編集で背景テキストを追加する方法

分類Dev

tkinter pythonで複数行のテキストを動的に追加する方法は?

分類Dev

Excel2016でテキストの上部に行を追加する方法

分類Dev

行の数字の末尾にテキストを追加する

分類Dev

C# OnClick で MenuItem のテキストを変更する方法

分類Dev

テキストに無制限の行を追加する(SwiftUI)

分類Dev

d3.jsの行にテキストを追加する方法

分類Dev

AsyncTaskの実行中にTextViewにテキストを追加する

分類Dev

MS Word:テキストの前後に行を追加する

分類Dev

ListBox内に複数行のテキストを追加する

分類Dev

テキストの上下に行遷移を追加する

分類Dev

Knitr:spin-すべての行に手動で# 'を追加せずにテキストを追加する方法は?

分類Dev

divにテキストを追加するときに、onclick内のテキストをonclick = "'+ var +'"として引用する方法

分類Dev

進行中の値のテーブルtdテキストを追加する方法

分類Dev

Python3xでテキストファイルから複数のリストに行を追加する方法

分類Dev

C#での実行時にコンテキストメニューストリップを追加する

分類Dev

cssの2行のテキストに楕円を追加するにはどうすればよいですか?

分類Dev

ggplotの複数行の横にテキストを追加するにはどうすればよいですか?

分類Dev

JS / HTMLで画像のテキストを追加変更する方法

分類Dev

tkinterで画像の上にテキストを追加する方法

分類Dev

HTMLの境界線までテキストを追加する方法

分類Dev

UIButtonに複数行のテキストを追加するにはどうすればよいですか?

Related 関連記事

  1. 1

    JavascriptHTML内にIf / ElseIfステートメントを追加する

  2. 2

    'convert'で複数のテキスト行を追加する

  3. 3

    行を壊さずにテキストにonclickイベントを追加する

  4. 4

    変数の特定の行にテキスト行を追加する

  5. 5

    Linuxの特定の行でファイルにテキストを追加する

  6. 6

    powershell:テキストを特定の行の後ではなく前に追加する

  7. 7

    PowerShellでテキストを検索して行を追加する

  8. 8

    pyqt5 Pythonの行編集で背景テキストを追加する方法

  9. 9

    tkinter pythonで複数行のテキストを動的に追加する方法は?

  10. 10

    Excel2016でテキストの上部に行を追加する方法

  11. 11

    行の数字の末尾にテキストを追加する

  12. 12

    C# OnClick で MenuItem のテキストを変更する方法

  13. 13

    テキストに無制限の行を追加する(SwiftUI)

  14. 14

    d3.jsの行にテキストを追加する方法

  15. 15

    AsyncTaskの実行中にTextViewにテキストを追加する

  16. 16

    MS Word:テキストの前後に行を追加する

  17. 17

    ListBox内に複数行のテキストを追加する

  18. 18

    テキストの上下に行遷移を追加する

  19. 19

    Knitr:spin-すべての行に手動で# 'を追加せずにテキストを追加する方法は?

  20. 20

    divにテキストを追加するときに、onclick内のテキストをonclick = "'+ var +'"として引用する方法

  21. 21

    進行中の値のテーブルtdテキストを追加する方法

  22. 22

    Python3xでテキストファイルから複数のリストに行を追加する方法

  23. 23

    C#での実行時にコンテキストメニューストリップを追加する

  24. 24

    cssの2行のテキストに楕円を追加するにはどうすればよいですか?

  25. 25

    ggplotの複数行の横にテキストを追加するにはどうすればよいですか?

  26. 26

    JS / HTMLで画像のテキストを追加変更する方法

  27. 27

    tkinterで画像の上にテキストを追加する方法

  28. 28

    HTMLの境界線までテキストを追加する方法

  29. 29

    UIButtonに複数行のテキストを追加するにはどうすればよいですか?

ホットタグ

アーカイブ