HTML

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 - 标记更改

到用户名：文本输入

几乎像登录，但没有服务器和电子邮件等。

Answer 1

请尝试以下代码：

<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 2

如果您希望输入和按钮都消失，可以将其添加到JavaScript中：

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

JSFiddle

Answer 3

它确实有用。

<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 4

尝试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 5

不需要您点击或使按钮消失。

<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 6

我不确定你想做什么。但是，如果您想将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 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>

通过按钮单击更改div中的内容

7 个答案:

HTML

CSS

JS