通过按钮点击更改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>