Question

如何用之前的按钮替换按钮？我正在寻找另一个类似问题的答案，该问题说使用类似的东西：

var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);

但这使得其他按钮确实发生了变化。有没有人知道将按钮更改为常规文本的另一种方法？

我知道该代码本身可以正常工作，但由于某些原因它不能用于我的代码，所以我并不关心该代码有什么问题。我只是想知道是否有人知道另一种方法。

由于

Answer 1

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

修改我刚刚注意到你的页面中有多个按钮，这会使我之前的例子出错。如果您要添加额外的按钮，那么可以让您更轻松地工作：

首先是代码：

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

在HTML部分中，如果这是您的布局，您可以创建一个列表(li)按钮... 每个列表都有自己的id，在这种情况下id_x将在以后替换其内容时使用。每个按钮调用一个函数change(id)，而id只是每个按钮的唯一编号。

在JS部分中，change(id)获取被点击的按钮的id，获取其值，并用纯文本替换相对列表项的innerHTML（内容）。

如果您还需要任何其他帮助，请告诉我。

Answer 2

似乎您正在寻找另一种方式来用纯文本替换按钮，我将向您展示 jQuery 方式。

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

// 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>");
});

正如您所看到的，使用jQuery会更清晰。你应该试一试！

以下是fiddle，因此您可以对其进行测试。

Answer 3

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

抱歉，编辑了错误的帖子

如何用纯文本替换html按钮

3 个答案:

HTML

的jQuery