JavaScript Can't Find Element by Id

Javascript can't find element by id?

The problem is that you are trying to access the element before it exists. You need to wait for the page to be fully loaded. A possible approach is to use the onload handler:

window.onload = function () {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
};

Most common JavaScript libraries provide a DOM-ready event, though. This is better, since window.onload waits for all images, too. You do not need that in most cases.

Another approach is to place the script tag right before your closing </body>-tag, since everything in front of it is loaded at the time of execution, then.

Javascript: Can't get element using getElementById

The reason for this is that scripts in the head load before the page is rendered. This means your content is not yet rendered and therefore not a part of document.

If you want to see this work, try moving your script below the element renders, like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "it finally works!";
</script>
</body>
</html>

A more standardized way of doing this is with events. Many people use jQuery but it can be done with plain js. This would mean changing your script like this:

<script type="text/javascript">
  function WinLoad() {
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "It finally works!";
  }
  window.onload = WinLoad;
</script>

This way you can still leave it in the <head>.

Also, using .html is from jQuery. It is generally used as .html(content). If you want to use the plain javascript version use .innerHTML = content.

I mention jQuery so much because it is a highly used API. This quote is from their site:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

document.getElementById() doesn't work?

Put your script AFTER the actual element, otherwise by the time your javascript code runs, there's not yet such element in the DOM.

<html>
    <body>
        <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
        <script>
            var x = document.getElementById('btn1');
            alert(x);
        </script>
    </body>
</html>

Alternatively put your script in a DOM ready event to ensure that the DOM is fully loaded by the browser before attempting to manipulate it:

<html>
    <body>
        <script>
            window.onload = function() {
                var x = document.getElementById('btn1');
                alert(x);
            };
        </script>
        <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
    </body>
</html>

I can't find element in Selenium by id, name or link text or WebDriverWait(). A No such error exception is thrown every time

According the information given in comments, the desired element is inside an iframe. This means that you need to switch to the iframe before making a search:

driver.switch_to.frame("frame name or id")
to_shopping_cart = driver.find_element_by_link_text("Enrollment Shopping Cart")

Then, if you need to switch to a default content, use:

driver.switch_to.default_content()

Can't find element by ID with puppeteer

You can quote the "1" in the selector:

await page.$eval("#\\31", el => console.log("elemnet is:", el.innerText));

It's OK to have id values that aren't identifiers, but you run into the CSS syntax problems you're seeing.

Why does jQuery or a DOM method such as getElementById not find the element?

The element you were trying to find wasn’t in the DOM when your script ran.

The position of your DOM-reliant script can have a profound effect on its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM and scripts are (generally) executed as they're encountered. This means that order matters. Typically, scripts can't find elements that appear later in the markup because those elements have yet to be added to the DOM.

Consider the following markup; script #1 fails to find the <div> while script #2 succeeds:

<script>
  console.log("script #1:", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
  console.log("script #2:", document.getElementById("test")); // <div id="test" ...
</script>

JavaScript Can't Find Element by Id