4

HTMLに追加する小さな電卓があります。ものを選択するためのいくつかのドロップダウンがあり、人が送信ボタンを押したときに、HTMLの電卓の下に画像を表示したいと思います。document.write（）でjavascript関数を使用してみましたが、ページ全体がクリアされます。送信ボタンがクリックされたときにのみページに画像を追加するjavascript関数を実行する方法はありますか？

これが私のコードの基本的な概要であり、私が問題を抱えている部分があります：

<html>

<head>
<script type="text/javascript">

function calc_rate() {

    //code that displays a message after the submit button is hit        
    document.write("answer");
}

</script>

</head>
<body>


<table>


<tr>
    <td class=rate_calc_label>Select Your Option Type:</td>
<td><select name="type1">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    </select></td>
</tr>  


<tr>
<td class=rate_calc_label>Select The Second Number:</td>
<td><select name="type2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    </select></td>
</tr>


<tr>
<td><input type="submit" value="Submit" name="calc_button" onclick="calc_rate()"/></td>
<td></td>
</tr>    

</table>

</body>
</html>

ある種の内部HTMLを使用することは可能でしょうか？それは私がストックオーバーフローで他の人から得たものですが、私はまだ少し混乱しています

4

3 に答える 3

12

出力にはプレースホルダー要素が必要です。次に、その要素のinnerHTMLを設定します。

<div id='answer'></div>

それから：

document.getElementById('answer').innerHTML = "answer is:" + yourdata
于 2012-08-10T18:16:46.033 に答える
4

document.write、periodは使用しないでください。DOM操作を使用する：http ：//www.quirksmode.org/dom/intro.html

于 2012-08-10T18:15:02.117 に答える
2

代わりに、任意のDOMノードのプロパティをdocument.write()設定して、ページにテキストを追加できます。innerHTML

<div id='result'></div>ページの最後（bodyタグの前）にを追加するとします。次に、JavaScriptに次のように記述します。

var result_display = document.getElementById('result');
// and in calc_rate():
result_display.innerHTML = "answer";

これにより、result_displayのテキストが常にリセットされることに注意してください。その操作を関数でラップすることもできます。

function displayResult(result){
    result_display.innerHTML = '<h2>' + result + '</h2>'; // or whatever formatting
}
于 2012-08-10T18:15:15.253 に答える