.html（）要素がJavaScript値を変更しないonclick

.html（）要素にonlick属性を追加しましたが、意図したとおりに機能せず、JavaScript値も変更されません。 "back"をクリックすると、 "initial"行に戻りますが、そうではありませんが、私は要素1〜3の間を移動することしかできません。.html（）要素がJavaScript値を変更しないonclick

これは複雑なthree.jsプログラムのスニペットであるため、アニメーション（）関数は継続的に呼び出されます。

ありがとうございます！

var currentClicked=-1; 
 
\t 
 
animate(); 
 
\t 
 
function next(input){ 
 
    currentClicked=input; 
 
    console.log(currentClicked); 
 
    return text(currentClicked); 
 
} 
 
\t 
 
function returnBack(){ 
 
    console.log("event catched"); 
 
    currentClicked=-1; 
 
    return text(currentClicked); 
 
} 
 
    
 
function text(currentClicked_){ 
 
    var back="<h7 id='goBackButton' onclick='returnBack()'>Back.</h7>"; 
 
    $(document).ready(function(){ 
 
    switch(currentClicked_){ 
 
     case -1: 
 
     $(".CurrentText").html(" <p >initial</p> "); 
 
     break; 
 
     case 0: 
 
     $(".CurrentText").html("<p>[01] </p> "+back); 
 
     break; 
 
     case 1: 
 
     $(".CurrentText").html(" <p>[02]<p/>"+back); 
 
     break; 
 
     case 2: 
 
     $(".CurrentText").html("<p>[03] </p>"+back); 
 
     break; 
 
     default: 
 
     $(".CurrentText").html("<p>default </p>"); 
 
     break; 
 
    } 
 
    }); 
 
} 
 
\t 
 
\t 
 
function animate() { 
 
    //console.log(currentClicked); 
 
    requestAnimationFrame(animate); 
 
    text(currentClicked); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<p onclick="next(0)">element one</p> 
 
<p onclick="next(1)">element two</p> 
 
<p onclick="next(2)">element three</p> 
 

 
<div class="CurrentText"></div>

出典

2017-10-29 Sasquatchas

これは、ユーザーが何らかのアクションを行うたびに、DOM要素（「戻るボタン」）を再構築するためには良い考えではありません。また、jsとhtmlを完全に分割し、ハンドラをonclick属性で設定するのではなく、.on()経由で行うことをお勧めします。だから私は、次のアプローチを示唆している：ここで

<p id="e1">element one</p> 
<p id="e2">element two</p> 
<p id="e3">element three</p> 
<p id="back" style="display: none;">back</p> 

<div class="CurrentText"></div> 

<script> 
$(document).ready(function() { 

    $('#e1').on('click', function() { next(1); }); 
    $('#e2').on('click', function() { next(2); }); 
    $('#e3').on('click', function() { next(3); }); 
    $('#back').on('click', function() { back(); }); 

    var current = -1; 
    var initial = -1; 

    function back() { 
    current = initial; 
    outputIndex(); 
    $('#back').hide(); 
    } 

    function next(index) { 
    current = index; 
    outputIndex(); 
    $('#back').show(); 
    } 

    function outputIndex() { 
    $('.CurrentText').html(current); 
    } 

    outputIndex(); // or don't call it if you don't want to output initial value on start 

});  
</script>

はPlunkerデモです。 h7見出しと呼ばれる要素がない

の1- h1からのみh6にある：

出典

2017-10-29 13:15:32 dhilt

は、次の3つの問題を抱えています。

2 - あなたの関数animateはここ

function animate() { 
console.log(currentClicked); 
//requestAnimationFrame(animate); 
text(currentClicked); 
}

ブラウザのクラッシュを引き起こした（再帰関数）自体の内部と呼ばれています。

3 - あなたは、動的に作成された要素を扱っているとき、あなたはより良いセレクタとしてbodyを使用してのようにあなたが必要とするセレクタにイベントをバインドします：

$('body').on('click','h6',returnBack)

var currentClicked=-1; 
 
\t 
 
animate(); 
 
\t 
 
function next(input){ 
 
    currentClicked=input; 
 
    console.log(currentClicked); 
 
    return text(currentClicked); 
 
} 
 
\t 
 
function returnBack(){ 
 
    console.log("event catched"); 
 
    currentClicked=-1; 
 
    //return text(currentClicked); 
 
} 
 
$('body').on('click','h6',returnBack) 
 
function text(currentClicked_){ 
 
    var back="<h6 id='goBackButton' >Back.</h6>"; 
 
    $(document).ready(function(){ 
 
    switch(currentClicked_){ 
 
     case -1: 
 
     $(".CurrentText").html(" <p >initial</p> "); 
 
     break; 
 
     case 0: 
 
     $(".CurrentText").html("<p>[01] </p> "+back); 
 
     break; 
 
     case 1: 
 
     $(".CurrentText").html(" <p>[02]<p/>"+back); 
 
     break; 
 
     case 2: 
 
     $(".CurrentText").html("<p>[03] </p>"+back); 
 
     break; 
 
     default: 
 
     $(".CurrentText").html("<p>default </p>"); 
 
     break; 
 
    } 
 
    }); 
 
} 
 
\t 
 
\t 
 
function animate() { 
 
    console.log(currentClicked); 
 
    //requestAnimationFrame(animate); 
 
    text(currentClicked); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<p onclick="next(0)">element one</p> 
 
<p onclick="next(1)">element two</p> 
 
<p onclick="next(2)">element three</p> 
 

 
<div class="CurrentText"></div>

出典

2017-10-29 16:35:00

.html（）要素がJavaScript値を変更しないonclick

答えて

関連する問題