전체 페이지를 지우지 않고 자바 스크립트를 사용하여 HTML에 무언가를 추가하는 방법

내 HTML에 추가 할 작은 계산기가 있습니다. 그것은 물건을 선택하는 몇 가지 드롭 다운을 가지고 사람이 제출 버튼을 누르면, 내 HTML에 계산기 아래에 그림을 표시하고 싶습니다. 나는 document.write()와 자바 스크립트 함수를 사용하여 시도했지만 전체 페이지를 지 웁니다. 제출 버튼을 클릭했을 때만 내 페이지에 그림을 추가하는 자바 스크립트 기능을 실행할 수있는 방법이 있습니까?전체 페이지를 지우지 않고 자바 스크립트를 사용하여 HTML에 무언가를 추가하는 방법

<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의 어떤 종류를 사용할 수있을 것이다 :

저는 여기에 문제가있어 일부 내 코드의 기본 개요입니까? 그게 내가 스톡 오버 플로우에 다른 사람으로부터 얻은거야하지만 난 아직도 조금 혼란스러워.

출처

2012-08-10 R Doolabh

출력을 위해 자리 표시 자 요소가 필요합니다. 다음

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

을 : : 다음 요소의 innerHTML을 설정

document.getElementById('answer').innerHTML = "answer is:" + yourdata

출처

2012-08-10 18:16:46

** 말씀! 나는 당신이 말한 것처럼 비어있는 div를 만들 수 있었고 거기에 갈 그림을위한 코드를 추가 할 수있었습니다. –

document.write, 마침표를 사용하지 마십시오. DOM 작업 사용 : http://www.quirksmode.org/dom/intro.html

출처

2012-08-10 18:15:02

는 ** MARC는이 마법처럼 일했다 – Neal

document.write() 대신 DOM 노드의 innerHTML 속성을 설정하여 페이지에 텍스트를 추가 할 수 있습니다.

<div id='result'></div>을 (body 태그 앞의) 페이지 끝에 추가한다고 가정 해보십시오. 그렇다면 귀하의 자바 스크립트가 :

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-10 18:15:15 bokonic

전체 페이지를 지우지 않고 자바 스크립트를 사용하여 HTML에 무언가를 추가하는 방법

답변

관련 문제