通過按鈕點擊更改div中的內容

Question

也許這是重複的，我不知道

但是，我如何讓我的文本輸入更改爲文本？

<input type='text' id='input_id' /> 
<button id='saveName'>Save name</button> 
<div id='box_id'></div> 

<script> 
    document.getElementById('saveName').addEventListener('click', function() { 
     var name = document.getElementById('input_id').value; 
     document.getElementById('box_id').innerHTML = 'Welcome ' + name; 
    }, false); 
</script> 

所以當按鈕被按下input - 標籤和 button -tag改變

的用戶名：文字輸入

幾乎像一個登錄但沒有服務器和電子郵件等

Answer 1

如果你想輸入和按鈕消失，你可以添加到您的JavaScript：

document.getElementById('saveName').remove(); 
document.getElementById('input_id').remove(); 

Answer 2

請嘗試以下代碼：

<input type='text' id='input_id' /> 
<button id='saveName' onClick="callMethod()">Save name</button> 
<div id='box_id'></div> 

<script> 
function callMethod(){ 
var name = document.getElementById('input_id').value; 
document.getElementById('box_id').innerHTML = 'Welcome ' + name; 
} 
</script> 

Answer 3

也不會要求你點擊或使按鈕dissapear。

<input type='text' id='input_id' onblur="callMethod()" /> 

<div id='box_id'></div> 


<script> 
function callMethod(){ 
var name = document.getElementById('input_id').value; 
document.getElementById('box_id').innerHTML = 'Welcome ' + name; 
} 
</script> 

Answer 4

我不確定你想要做什麼。但是，如果你想改變input標籤和標籤button到形式：用戶名：text刪除這些元素：

<input type='text' id='input_id' /> 
<button id='saveName'>Save name</button> 
<div id='box_id'></div> 
<script> 
document.getElementById('saveName').addEventListener('click', function() { 
var name = document.getElementById('input_id').value; 
document.getElementById('input_id').remove(); 
document.getElementById('saveName').remove(); 
document.getElementById('box_id').innerHTML = 'Welcome ' + name; 
}, false); 
</script> 

Answer 5

它將工作肯定。

<script> 
function callMethod(){ 

document.getElementById('saveName').remove(); 
document.getElementById('input_id').remove(); 
document.getElementById('box_id').innerHTML = 'Welcome '+ document.getElementById('input_id').value; 
} 
</script> 

Answer 6

嘗試this Fiddle example

HTML

<div id="login"> 
    <input type='text' id='input_id' /> 
    <button id='saveName'>Save name</button> 
</div> 
<div id='box_id'>a</div> 

CSS

#box_id {display:none; background:#ccc;} 
#login, #box_id {padding:20px; background:#eee;} 

JS

document.getElementById('saveName').addEventListener('click', function() { 
var name = document.getElementById('input_id').value; 
$('#login').hide(); 
document.getElementById('box_id').innerHTML = 'Welcome ' + name; 
$('#box_id').css({'display': 'block' }); 
}, false); 

Answer 7

試試這個。解決問題，接受工作。

<script> 
function callMethod(){ 
var name = document.getElementById('input_id').value; 
document.getElementById('box_id').innerHTML = 'Welcome ' + name; 
document.getElementById('saveName').style.display="none"; 
document.getElementById('input_id').style.display="none"; 

} 
</script>