JS printing img as if it already had src - javascript

I have these tests html/js files. What I'm trying to do is show that the original image doesn't have the src attribute, and then show that it is actually there, or that is the expected behavior.
What is actually happening is that it is printing the image as if it already had the src attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica DOM JS</title>
<script src="index.js"></script>
</head>
<body>
<h1 id="demo" class="clase1">Nada</h1>
<img id="imagen" />
<div class="clase1"></div>
</body>
</html>
function foo() {
document.getElementById("demo").innerHTML += " Hola Mundo!";
let imagen = document.getElementById("imagen");
console.log(imagen);
imagen.src = "../assets/accessible-icon-brands.svg";
console.log(imagen);
setTimeout(() => {
imagen.src =
"https://i1.wp.com/elanillounico.com/wp-content/uploads/2015/03/JRR-Tolkien15.jpg?fit=760%2C1076&ssl=1";
}, 5000);
}
window.onload = foo;

The browser console may be lazily evaluating the element object. You could log the outerHTML instead.
console.log(imagen.outerHTML);
imagen.src = "../assets/accessible-icon-brands.svg";
console.log(imagen.outerHTML);

Related

How to make the h1 change to the what is written in an input?

I have an assignment where I have to change h1 to whatever is written in the input. I have to do this through making a function with getElementByID.
This is what I have so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=
}
</script>
</body>
</html>
You passed the value (newtext) to your function but never used it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=newtext;
}
</script>
</body>
</html>
Try changing your script to this:
function changeh1(newtext) {
document.getElementById("Header").innerText = newtext;
}
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext;
}
</script>
The textContent API is useful to get and also set the text content of a node. In your original code, you did not set the content of the Node you were trying to modify (the header, h1). To fix it, just set it to the argument of the callback function you defined. In the DOM, you are passing this.value as the argument for newtext
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext
}
</script>
</body>
</html>

Answered: Error when trying to change innertext with a button in html and javascript

I was trying to make a tally counter with buttons but when i press the button i get this error:
Uncaught TypeError: Cannot set properties of null (setting 'innerText')
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=./test.js></script>
<link rel="stylesheet" href=./test.css></link>
</head>
<body>
<h1 id="count_el">0</h1>
<button id="increase" onclick="increase()">INCREASE</button>
<button id="decrease" onclick="decrease()">DECREASE</button>
</body>
</html>
And here is my JavaScript code:
const count_el = document.getElementById("count_el")
let count = 0
function increase(){
count += 1
count_el.innerText = count
}
function decrease(){
count -= 1
count_el.innerText = count
}
Try and add defer into your script tag like so:
<script src=./test.js defer></script>
this will make the javascript load after the page has loaded and then the error should disappear.
It seems the only problem is the loading phase of your javascript code: When trying to call document.getElementById('count_el') it can't find such element because it is not loaded in the DOM, so to avoid that you can use the defer attribute in your script tag.
There are three main ways to load an external js script, and I quote:
If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing
completes)
If defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished
parsing
If neither async or defer is present: The script is downloaded and executed immediately, blocking parsing until the script is completed
const count_el = document.getElementById("count_el")
let count = 0
function increase(){
count += 1
count_el.innerText = count
}
function decrease(){
count -= 1
count_el.innerText = count
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=./test.js defer></script>
<link rel="stylesheet" href=./test.css></link>
</head>
<body>
<h1 id="count_el">0</h1>
<button id="increase" onclick="increase()">INCREASE</button>
<button id="decrease" onclick="decrease()">DECREASE</button>
</body>
</html>
I assume the problem with your code is that the script runs before the dom has been loaded, so I've edited it to run after the page has been loaded. I've also added the event listeners using javascript instead of html.
if (document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);
function onLoad() {
const countDom = document.querySelector("#count_el"),
increaseButton = document.querySelector("#increase"),
decreaseButton = document.querySelector("#decrease");
let count = 0;
increaseButton.addEventListener("click", increase);
decreaseButton.addEventListener("click", decrease);
function increase() {
count += 1;
countDom.innerText = count;
}
function decrease() {
count -= 1;
countDom.innerText = count;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=./test.js></script>
<link rel="stylesheet" href=./test.css></link>
</head>
<body>
<h1 id="count_el">0</h1>
<button id="increase">INCREASE</button>
<button id="decrease">DECREASE</button>
</body>
</html>
You could also just move your scripts to the end of the body instead of inside the head but it's better to have safe scripts that will run regardless of the position and state of the script.

Cannot set property of undefined error on button press

I'm trying to change the background color of a div element on button press but I'm getting the error Cannot set property 'BackgroundColor' of undefined. The event handler for the button is inside the window.onload event. I thought at that point every element inside the html document would be loaded, but apparently not.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random").style.BackgroundColor= "black";
});
}
</script>
</body>
</html>
try the following code segment.
the issue is document.getElementsByClassName("random") returning an array of elements.So you should select one element from that array and get the style of that element.
And BackgroundColor should be backgroundColor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random")[0].style.backgroundColor= "black";
});
}
</script>
</body>
</html>
You can this out - getElementsByClassName produces error "undefined"
Another alternative could be this.
<body>
<div id="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementById("random").style.backgroundColor= "black";
});
}
</script>
Modify the script as follows and try again:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.querySelector(".random").style.backgroundColor= "black";
});
}
</script>
</body>
</html>
Look into comments by #Bravo, document.getElementsByClassName("random") returns a HTMLCollection, not a single element - therefore document.getElementsByClassName("random").style is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function () {
document
.getElementById('button')
.addEventListener('click', function () {
const button = document.getElementsByClassName('random');
for (let index = 0; index < button.length; index++) {
const element = button[index];
element.style.backgroundColor = 'black';
}
// if you will have only one element with class=random or if you only want to apply style to the first element with class=random, then
// button[0].style.backgroundColor = 'black';
// in your case, you should add an id to the element and use id as the selector
});
};
</script>
</body>
</html>

Javascript Loading display

I want to make a javascript program to activate something which requires some time to compute a animated screen pop ups while computing/loading. My Problem is I don't know how to achieve this in JS using async code. I have my approaches like this on where I just created a element into the website via javascript animated via CSS and when the computation was finished closed via javascript, but nothing happened. The idea was kind of like this:
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
});
#example{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
</html>
So what is wrong with this approach?
It's likely that your entire code block is executed in one go, including setting the loading element visible and invisible afterwards, without giving the browser time to actually update the rendered page to show the loading element.
One way to modify your code would be:
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
setTimeout(function() {
//Some Computing...
document.getElementById("example").style.display = "none";
}, 0);
});
This should allow the browser to update the page before going into the computation.
You should access after loading window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
})
};
</script>
</head>
<body>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
<script>
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
})
</script>
</html>

Twitter Widget won't let me change the URL

I have embedded the twitter widget in an HTML. I have a JS object that contains URLs of 10 twitter profiles. I want to make a function that would let me replace the current URL (in the widget) with another one from the object.
However when running the script, the href will not change (error say its null).
Does Twitter maybe prevent any changes to href or other tags inside the HTML class?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
<a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
</p>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<button onclick="change()">Change link</button> <button onclick="check()">Preview link</button>
<script>
var URL = document.getElementById("twitter").href;
console.log(URL);
function change() {
alert(document.getElementById("twitter").href = "https://twitter.com/IBMref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor");
}
function check() {
console.log(document.getElementById("twitter").href);
}
</script>
</body>
</html>
It did change, you just called alert on the change itself.
var URL = document.getElementById("twitter").href;
console.log(URL);
function change() {
document.getElementById("twitter").href = "https://twitter.com/IBM?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor";
alert(document.getElementById("twitter").href);
}
function check() {
console.log(document.getElementById("twitter").href);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<p>
<a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
</p>
<button onclick="change()">Change link</button>
<button onclick="check()">Preview link</button>
</body>
</html>

Categories