单击时将一个按钮替换为另一个按钮答案

【问题标题】：Replace one button with another on click单击时将一个按钮替换为另一个按钮
【发布时间】：2014-07-20 13:35:13
【问题描述】：

我是 stackoverflow 的新手，也是一名业余 javascript 程序员。我正在尝试制作一个程序，当我单击一个按钮时，会出现一个提示，询问我的名字。除此之外，我还希望该按钮消失，并替换为另一个按钮，其值为：Hello 'name'。我该怎么做呢？我目前在 javascript 中的代码询问我的姓名，但不会使按钮消失。我现在的js如下：

var button = document.getElementById("button");
function naming() {
    var getName = prompt("What is your name?");
    button.style.display = "none";
};

还有我的按钮 html：

<button id="button" onclick="naming();"> Name Here</button>

【问题讨论】：

标签： javascript button replace onclick click

【解决方案1】：

这可行，它不会删除按钮，而是再次将其用作用户输入的名称。

HTML

<button id="button">Name here</button>

var button = document.getElementById('button');
button.addEventListener('click', function() {
    var name = prompt("What is your name?");
    this.innerHTML = name
}, false);

http://jsfiddle.net/rYU7Q/

【讨论】：

它可以在 jsfiddle 中工作，但不能在我的 html 文件中工作，我很确定语法是正确的。你有什么建议？
我会将这个答案标记为正确，因为代码在 jsfiddle 中运行良好，但问题出在我实际计算机的某个地方。当我将相同的 js 和 html 代码放在 jsfiddle 中时，它起作用了。
我猜是因为 javascript 在 DOM 加载之前运行。检查这个答案的解决方案，以便在 DOM 加载后执行代码:) stackoverflow.com/questions/9899372/…
我会在加载DOM后尝试执行代码，但是在你给我的js中，在.addEventListener这个东西中，有一个名为function()的函数。我已经有一个同名的了。那么，如果我把它的名字改成like，naming()，它会起作用吗？

【解决方案2】：

另一种方法

<button class="btn btn-primary" id = "del-btn">Old btn</button>
<div id = "sho-btn"></div>


 <script>
    var a = "<button class='btn btn-primary'>New Button</button>";
    document.getElementById("del-btn").style.visibility = 'hidden';
    document.getElementById("sho-btn").innerHTML = a;
    </script>

【讨论】：