如何用纯文本替换html按钮
[英]How to replace html button with plain text
问题描述
How do you replace a button with whatever words were on the button before? 
如何用以前的按钮替换按钮？ I was looking at an answer to another similar question, which said to use something like: 我正在寻找另一个类似问题的答案，该问题说使用了类似的内容：
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. 但这改变了其他按钮的功能。 Does anyone know another way to change a button to regular text? 有谁知道将按钮更改为常规文本的另一种方法？
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. 我知道该代码仅能单独工作，但是由于某种原因它不能与我的代码一起工作，因此我并不在乎该代码有什么问题。 I'm just wondering if anyone knows another way to do it. 我只是想知道是否有人知道另一种方法。
Thanks 谢谢
3 个解决方案
解决方案1
1 已采纳 2014-01-31 17:21:27
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT: I've just noticed you had multiple buttons in your page, which will make my previous example wrong. 编辑：我刚刚注意到您在页面中有多个按钮，这将使我前面的示例错误。 heres something that will make you work easier i think in case you will add extra buttons: 这可以使您的工作更轻松一些，我想如果您要添加额外的按钮：
first heres the code: 首先继承代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout... each list will have its own id, in this case id_x that will be used later when you replace its content. 在HTML部分中，如果这是您的布局，则可以创建按钮列表(li) ...每个列表都有其自己的ID，在本例中为id_x ，稍后将在替换其内容时使用。 each button calls a function change(id) while id is just a unique number for each button. 每个按钮调用一个函数change(id)而id只是每个按钮的唯一编号。
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text. 在JS部分中， change(id)获取被单击的按钮的ID，获取其值，然后用纯文本替换相对列表项的innerHTML（内容）。
Let me know if you still need any other help. 让我知道您是否仍然需要任何其他帮助。
解决方案2
1 2014-01-31 18:30:04
Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way. 似乎您正在寻找用纯文本替换按钮的另一种方法，我将向您展示jQuery的方法。
HTML HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery jQuery的
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. 如您所见，jQuery使它更加干净。 You should try it! 你应该试试看！
解决方案3
-1 2014-01-31 17:34:18
<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post 抱歉，编辑了错误的帖子
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.