I want to ask how to change an element button to an image using javascript when it's clicked? For example, from Submit button to an image of checked.

CodePudding user response：

I use svg for demo, you can change it into <img src="https://some_picture">

var button = document.getElementsByTagName("button")[0];

button.addEventListener('click', function() {
  button.innerHTML  =`<svg width="50" height="50"></svg>`
});

<button>click</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add a click event listener to the button that changes its outerHTML property:

btn.addEventListener('click', function(){
  this.outerHTML = `<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">`
})

<button id="btn">Click</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

function myFunction() {
    document.getElementById("contentChange").innerHTML = "Hello World";
}

<button id="contentChange" onclick="myFunction()">Click me</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>