입력 유형 = "텍스트"to innerHTML

Question

<input type="text">에 2 명의 플레이어 이름을 입력 한 다음 JavaScript를 사용하여 <th>의 innerHTML을 사용하여 <table>의 <th> 태그로 작성 했습니까?

가 여기에 JSFiddle입니다 : JSFiddle

Answer 1

그래, 당신은 innerHTML을 사용해야합니다. 다음 스 니펫을 살펴보십시오. HTML 요소에 다른 ID를 부여해야합니다. 요소의 ID는 고유해야합니다. 시나리오

function saveNames(){ 
 

 
    // get the first's player name. 
 
    var player1name = document.getElementById("player1name").value; 
 
    
 
    // get the second's player name. 
 
    var player2name = document.getElementById("player2name").value; 
 
    
 
    // set the first's player name in the corresponding th. 
 
    document.getElementById("player1").innerHTML = player1name; 
 
    
 
    // set the second's player name in the corresponding th. 
 
    document.getElementById("player2").innerHTML = player2name; 
 
}

table { 
 
    border-collapse: collapse; 
 
    margin:10px; 
 
} 
 
table, th, td { 
 
    border: 1px solid black; 
 
    padding:5px; 
 
} 
 
td { 
 
    text-align:center; 
 
    width:60px; 
 
}

<div class="playerinputsection"> 
 
    <label for="player1name">Player 1</label> 
 
    <br> 
 
    <input type="text" name="playernames" id="player1name"> 
 
</div> 
 
<div class="playerinputsection"> 
 
    <label for="player2name">Player 2</label> 
 
    <br> 
 
    <input type="text" name="playernames" id="player2name"> 
 
</div> 
 
<br> 
 
<button onclick="saveNames()">Save names</button> 
 
<br> 
 
<br> 
 
<table> 
 
    <tr> 
 
     <th id="player1"></th> 
 
     <th id="player2"></th> 
 
    </tr> 
 
    <tr> 
 
     <td>0</td> 
 
     <td>0</td> 
 
    </tr> 
 
</table>

이 좋아, Knockout.js처럼 MVVM 라이브러리를 사용하기 위해 더 우아 할 것이다. 그러나 일반 JavaScript를 사용하면 동일한 결과를 얻을 수 있습니다. 언급 된 라이브러리는 더 복잡한 UI를 만들어야 할 때 힘이 있음을 보여줍니다.