クリック難易度でのJavaScript関数の実行

Question

別のボタンを作成するJavaScript関数を使用しようとしています。別のボタンをクリックして別のjs関数を実行できます。私はjs関数のために作成されたボタンのそれぞれに対して異なるパラメータを持っています。

このバージョンの関数が機能します。これは、パラメータ "addr2"を持つonclick valChange関数を持つ新しいボタンを作成します。私は "addr2"を必要に応じて変更することができる文字列にしたいと思っています。

htmlは、関数が新しいdivを入れることを意味するdivです。 両方のバージョンでは、テストボックスのdiv内に新しいボタンが作成されます。バージョン1のボタンが機能し、クリック時に警告機能を実行します。バージョン2のボタンは機能を実行しません。バージョン2を動作させるにはどうすればよいのですか？現在動作していないのはなぜですか？

<div id="testbox"> 

</div> 

バージョン1は、ボタンが実際に動作するかどう

function dostuff() 
{ 
    var newDiv = document.createElement('div'); 
    var i = "box1"; 
    var html = '<input type="button" onclick="valChange(i)">'; 
    newDiv.innerHTML = html; 
    $('#testbox').append(html); 
} 

がアラートを表示します動作しない、バージョン2

function dostuff() 
{ 
    var newDiv = document.createElement('div'); 
    var html = '<input type="button"onclick="valChange(`box1`)">; 
    newDiv.innerHTML = html; 
    $('#testbox').append(html); 
} 

に動作します。

function valChange (divID) 
{ 
    alert("it worked" + divID); 
} 

Answer 1

var iは正しく使用されません。

function dostuff() 
{ 
    var newDiv = document.createElement('div'); 
    var i = "box1"; 
    var html = '<input type="button" onclick="valChange(\''+i+'\')">'; 
    newDiv.innerHTML = html; 
    $('#testbox').append(html); 
} 

Answer 2

あなたにはいくつかの引用符がありません。

function dostuff() { 
 
    
 
    $inp = $("<input/>", { 
 
    type : "button", 
 
    value : "CLICK ME", 
 
    click : valChange 
 
    }); 
 
    
 
    $("<div/>", { 
 
    append : $inp, 
 
    appendTo : "#testbox" 
 
    }); 
 

 
} 
 

 
function valChange() { 
 
    alert("My value is: " + this.value); 
 
} 
 

 
dostuff();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testbox"></div>

：
現在のjQueryの中でそれを行うための別の方法があるJSの代わりに（あなたが望むものである）文字列

function dostuff() { 
 
    var newDiv = document.createElement('div'); 
 
    var i = "box1"; 
 
    var html = '<input type="button" onclick="valChange(\''+ i +'\')">'; 
 
    newDiv.innerHTML = html; 
 
    $('#testbox').append(html); 
 
} 
 

 
function valChange (divID) { 
 
    alert("it worked" + divID); 
 
} 
 

 
dostuff();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testbox"></div>

の変数box1を見込んでクリック

Answer 3

2番目のバージョンでは、iが文字列として表示されています。これは正常に動作するはずです：

function dostuff() 
    { 
     var newDiv = document.createElement('div'); 
     var i = "box1"; 
     var html = '<input type="button" onclick="valChange(\'' + i + '\')">'; 
     newDiv.innerHTML = html; 
     $('#testbox').append(html); 
    }