<input>の値を、JavaScriptを使用して上付き文字を含むように変更します。

Question

次のコードはHTML形式で正しく動作します。

<input type = "text" name = "var_1" id = "i_var_1" value = "x&sup8"> 

Javascriptを使用して、次は、また作品：

<p id = "p1"><input type = "text" name = "var_1" id = "i_var_1" value = "0"></p> 

<script....> 

q1 = document.getElementById("p1"); 

q1.innerHTML = '<INPUT TYPE = "text" name = "var_1a" id = "i_var_1a" value = "x&sup8">'; 

</script> 

私はボタンが押されたときに上付きで追加する必要がありますが。だから、私は次のようなものを持っています：

<p id = "p1"><input type = "text" name = "var_1" id = "i_var_1" value = "0"></p> 

<input type = "button" id = "i_button" value = "Add the superscript" onclick="Add_Superscript()";> 

<script.....> 

function Add_Superscript() 
{ 

q1 = document.getElementById("p1"); 

b1 = document.getElementById("i_var_1"); 

c1 = b1.value.toString() + "&sup8"; 

q1.innerHTML = '<INPUT TYPE = "text" name = "var_1a" id = "i_var_1a" value = c1.value>'; 

} 

</script> 

上記のコードは上付き文字を正しく再現しません。

誰でもいいですね。コメントありがとうございます。

Answer 1

これはわかりませんが、入力ボックスにあるものに& sup8を追加します。

function Add_Superscript() { 
 

 
    q1 = document.getElementById("p1"); 
 

 
    b1 = document.getElementById("i_var_1"); 
 
    
 
    c1 = b1.value.toString() + "&sup8"; 
 

 
    q1.innerHTML = '<INPUT TYPE = "text" name = "var_1a" id = "i_var_1a" value = "' + c1 + '">'; 
 

 
}

<p id="p1"> 
 
    <input type="text" name="var_1" id="i_var_1" value="0"> 
 
</p> 
 

 
<input type="button" id="i_button" value="Add the superscript" onclick="Add_Superscript()" ;>

Answer 2

あなたにもあなたのコードと不要なコードの多くのいくつかの誤植を持っています。既存のinputのvalueを挿入するボタンにクリックイベントハンドラを設定するだけで済みます。新しいinputを作成する必要はありません。

いくつかの注意事項：

あなたが（それはあなたが最初の場所で行う必要はありませんが判明した）新しいinput要素を作成しようとしていたとき、あなたは文字列として全体の事を持っていました。あなたは、文字列を終了に新しい値を連結し、このような文字列の閉鎖を、連結することで、その文字列に動的な値を挿入する必要があります。

q1.innerHTML = '<input type="text" name="var_1a" id="i_var_1a" value=' + c1.value + '>'; 

次に、それがために良い命名規則を使用するのが最善です要素と変数。 idとnameの接頭辞には、その要素の「タイプ」を表すものを付けます。 btn（ボタン）、txt（テキストボックス）、chk（チェックボックス）、rad（ラジオボタン）などを使用してください。_（これは非常に古い規則です）を使用しないでください。代わりに "camelCase"を使用してください。さらに、フォーム要素ではフォームの提出目的でnameを指定する必要がありますが、CSSとJavaScriptの目的にはidを指定することをお勧めします。 nameに使用した同じidを使用して、同じものに対して2つの異なる名前を持たないようにします。

最後に、HTML属性（onclick、onmouseoverなど）を使用してHTML要素をイベントハンドラに設定しないでください。これにより、コールバック関数のthisバインドを変更するグローバルな匿名関数が作成され、スケールとデバッグが難しく、W3C DOM Event specificationに従わない「スパゲッティコード」が作成されます。代わりに、JavaScriptですべての作業を行い、関数をイベントに接続するには.addEventListener()を使用します。

// Get references to the relevant DOM elements 
 
var btn = document.getElementById("btnGo"); 
 
var input = document.getElementById("txtInput"); 
 

 
// Set up a click event handling function 
 
btn.addEventListener("click", add_Superscript); 
 

 
function add_Superscript(){ 
 
// Create a new value that is the old value plus a "superscript" value 
 
var newVal = input.value + "&sup8"; 
 
// Update the input with the new value: 
 
input.value = newVal; 
 
}

<p> 
 
    <input type="text" name="txtInput" id="txtInput" value="0"> 
 
</p> 
 

 
<input type = "button" id="btnGo" value="Add the superscript">

Answer 3

私はあなたが何をしようとしているのか分からないけど、多分それが理由c1.valueのです！試してください： q1.innerHTML = '<INPUT TYPE = "text" name = "var_1a" id = "i_var_1a" value =' + c1 + '>';