如何在不删除整个页面的情况下使用javascript向我的html添加内容 [英] How do I add something to my html using javascript without erasing the whole page
问题描述
我有一个小型计算器，我将其添加到我的html中。它有几个下拉列表来选择内容，当一个人点击一个提交按钮时，我想在我的html中的计算器下面显示一张图片。我试过使用一个JavaScript函数：document.write（），但清除整个页面。有没有一种方法可以让我的JavaScript函数运行，当点击一个提交按钮时，它只会添加图片到我的页面？
以下是我的代码的基本大纲与我遇到麻烦的部分：
< html>
< head>
< script type =text / javascript>
函数calc_rate（）{
//在提交按钮命中后显示消息的代码
document.write（answer）;
}
< / script>
< / head>
< body>
< table>
< tr>
< td class = rate_calc_label>选择您的选项类型：< / 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>选择第二个数字：< / 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 =submitvalue =Submitname =calc_buttononclick =calc_rate（）/>< / td>
< td>< / td>
< / tr>
< / table>
< / body>
< / html>
是否可以使用某种内部HTML？这就是我从stockoverflow上的其他人那里得到的，但我仍然有点困惑。 然后设置该元素的innerHTML：
< div id ='answer'>< / div>
然后：
document.getElementById（'answer'）。innerHTML =answer is：+ yourdata
I have a small calculator that I'm adding to my html. It has a few dropdowns to select stuff and when a person hits a submit button, I'd like to display a picture below the calculator in my html. I've tried using a javascript function with: document.write() but that clears the whole page. Is there a way that I can get a javascript function to run which only adds a picture to my page when a submit button is clicked?
Here's a BASIC outline of my code with the part I'm having trouble with:
<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>
would it be possible to use some kind of inner-HTML? That's what I got from others on stockoverflow but I'm still a little confused
You need a placeholder element for your output. Then set the innerHTML for that element:
<div id='answer'></div>
then:
document.getElementById('answer').innerHTML = "answer is:" + yourdata
这篇关于如何在不删除整个页面的情况下使用javascript向我的html添加内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
