Html Question posted in
Some basic documentation can be found here.

Why doesn't this document.innerHTML function work?

I am not sure why if you trigger the function, nothing happens

loginButton.addEventListener("click", function() {
  const password = document.getElementById("password").value;

  if (password === "password") {
    alert("Correct!");
    document.innerHTML = <embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>;
  } else {
    loginMessage.textContent = "Invalid password.";
  }
});

I was expecting a embed of a website

Tags:

2

Answers


  1. 0

    There are at least four separate reasons your code doesn’t work.

    document doesn’t support innerHTML

    innerHTML is a property found on HTML elements. The document object is not an HTML element.

    Consider document.body.innerHTML instead.

    innerHTML expects a string

    As pointed out by Mina, <embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed> is a syntax error in JavaScript.

    You should see this error reported in the Console of your browser’s developer tools.

    You need to assign a string to innerHTML. Wrap the code in ' (or " and escape the " in the data).

    = '<embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>';

    <embed> isn’t for HTML documents

    Also note that according to MDN:

    Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <embed> is generally not wise if you want your site to be operable on the average user’s browser.

    Consider <iframe> instead.

    Stackoverflow forbids it

    Stackoverflow has a CSP that forbids other sites from embedding it.

    Login or Signup to reply.
  2. 0

    you want to add an embed element to the body element of the document, so we need to access the body element explicitly.
    Also, the HTML content should be enclosed in quotes.
    It should be modified to:

    document.body.innerHTML = '<embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search