I am trying to understand why neither of the commented out scripts work. When I step through the code in the console they are both returning the correct variable values but neither of the commented out code changes the image size. I would think that either one of commented set of scripts would be the correct as opposed to the way that works. If someone could please help me with what I am not understanding it would be greatly appreciated. thanks
<!DOCTYPE html>
<html>
</head>
<body>
<img onmouseover = "increaseSize(this)" id="img2" width="400px" height="400px" src="20191128chichenitza.jpg" title="Chichenitza">
<script>
function increaseSize(y) {
var currWidth = y.clientWidth*1.50;
var currHeight = y.clientHeight*1.50;
y.width = currWidth;
y.height = currHeight;
/*document.getElementById("img2").style.width = currWidth;
document.getElementById("img2").style.height = currHeight;
or
y.style.width = currWidth;
y.style.height = currHeight;
*/
}
</script>
</body>
</html>
The value of .style.width must be set in the same way as you would in CSS. Therefore, y.style.width = currWidth + "px";
Related
Javascript createElement() is not working in Chrome but it works in IE and Firefox fine. Why?
It's working perfectly, use this code:
var catDiv = document.createElement("div");
catDiv.innerHTML = "Test";
document.body.appendChild(catDiv);
Another working example (if you have an element with Id = myTableBody in your HTML)
var appendingTo = document.getElementById("myTableBody");
var tr = document.createElement("tr");
tr.setAttribute("name", "i");
appendingTo.appendChild(tr);
var name = document.createElement("Div" );
will work. And later you can add the attributes like
name.colSpan="2";
document.body.appendChild(name);
Note: don't try to use angular brackets like createElement("<div />").
It will not work in Chrome.
Edit: syntax issue in above code fixed. there should be a dot instead of comma.
Beacause your code is messed up, there's nothing wrong with "createElement":
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
window.onload = function () {
for (var i = 0; i < 100; i ++) {
var div = document.createElement ("div");
div.style.border = "1px solid black";
div.style.margin = "20px";
div.style.padding = "10px";
document.body.appendChild (div);
}
}
</script>
<style></style>
</head>
<body></body>
</html>
So I also couldn't get createElement() to work in chrome. After reading Caio's post and testing the code provided I figured out what I was doing wrong.
On w3schools.com the examples they provide always use the tag name in all caps ex. createElement("DIV"), which is the way I was using it and with poor results.
After changing from "DIV" to "div" in my own code it instantly worked.
Thanks Caio.
Why doesn't the second (hawk) image appear when the button is clicked? It goes straight to the else statement showing the ant image.
<!DOCTYPE html>
<html>
<body>
<script>
function changeImg() {
if (document.getElementById("cycle").src == "fox.jpg") {
document.getElementById("cycle").src = "hawk.jpg";
} else {
document.getElementById("cycle").src = "ant.jpg";
}
}
</script>
<button onclick = "changeImg()">change image</button>
<img id ="cycle" src ="fox.jpg"/>
</body>
</html>
Please add your script tags at the end of the body to make sure that your dom is rendered before accessing any elements. (like in my example)
The problem with your code is, that you need to add a new if for every new image you add. As you noticed yourself, it becomes hard to understand and debug.
For something like cycling, use an array and modulo operation on the index of that array.
With this solution, you can add as many images to the images array as you like, without touching the code/logic;
<!DOCTYPE html>
<html>
<body>
<button onclick="changeImg()">change image</button>
<img id="cycle" />
<script>
var imageElement = document.getElementById("cycle");
var images = ["fox.jpg", "hawk.jpg", "ant.jpg"]; // add as many images as you want
var counter = 0;
imageElement.src = images[counter] // set the initial image
function changeImg() {
counter = (counter + 1) % images.length;
imageElement.src = images[counter];
}
</script>
</body>
</html>
document.getElementById("cycle").src always has full url of image (example:https://example.loc/example/fox.jpg) and this is not similar from fox.jpg.
You need try another solution.Try use
cycle.getAttribute('src')
Example code:
function changeImg() {
let cycle = document.getElementById("cycle");
console.log(cycle.src,cycle.getAttribute('src')); // show real value and taribute
if (cycle.getAttribute('src') == "fox.jpg") {
cycle.src = "hawk.jpg";
} else {cycle.src = "ant.jpg";
}
}
Use getAttribute('src') if you want to access the actual contents of the attribute. Otherwise you get the resolved URL.
var cycle = document.getElementById("cycle");
if (cycle.getAttribute('src') == "fox.jpg") {
cycle.src = "hawk.jpg";
} else {
cycle.src = "ant.jpg";
}
Could anybody be so kind as to direct myself and the many other NOVICE LEARNERS who come here seeking Appreciative suggestions for a solution such as this problem please?
I have managed to create an array for the src and the image but i cannot find a way to append a ID array to the ID tag of the IMG that is HTML. i.e img id="foo" src = "bar" ect ect. i wish to have a n array for the ID .
I wish to start coding dry , and i have been watching many vids and tutorials and have managed to get this far...
<html>
<body>
<var x=0; x<10; x++1>
<img id="0" src="cicons1.png" style="position:absolute;">
<script>
var i=0
function setup() {
document.getElementById([i]).style = ("position:absolute; left:"+[i*100+100]+"px;" )
document.getElementById([i]).src="Cicons"+[i]+".png";
console.log([i])
}
for (var i=0; i<10; i=i+1) { setup();
}
</script>
</body>
</html>
But i wish to have an array for the ID also so i donnot have to repeat the image tag
over and over again. as i am dealing with over 60+ icons and images and text captions. so it would be ideal to have a DRY method, And i have failed very badly to provide a solution myself, So now i must turn to the experts..
So i thank you in advance if you have a solution..
https://ibb.co/ifGcKk
Please, be aware there are really a lot of ways to do such a task, here is just an example:
<html>
<body>
<div id="iconContainer"></div>
<div id="icoSelected" style="position: absolute; top: 120px;">Selected: -none-</div>
<script>
function showSelected() {
document.getElementById('icoSelected').innerHTML = this.src;
}
function setup(cnt, id) {
var imgEl = document.createElement('img');
var icoName = "Cicons"+id+".png";
imgEl.id = 'icon-'+id;
imgEl.style.position = 'absolute';
imgEl.style.left = (id-1)*100+20+'px';
imgEl.style.width = '80px';
imgEl.style.height = '80px';
imgEl.src = icoName;
imgEl.addEventListener('click', showSelected);
cnt.appendChild(imgEl);
}
var cont = document.getElementById('iconContainer');
for (var i=0, nIcons=10; i<nIcons; i++) {
setup(cont, i+1);
}
</script>
</body>
</html>
So I'm new to coding, so thought that I would give some more simple things a go. I tried to make a code which would change an image every time a button is pressed, but it does not function. For a while I had it functioning so that the square would display but the image would not change when the button is pressed. But I then altered it and it will now not run with internet explorer due to a syntax error. Any help would be seriously appreciated, please bare in mind that it could be completely wrong, as I just used guides off of the internet :) I also probably inserted this code wrong, but I tried ;)
<!DOCTYPE html>
<html>
<body>
<img id="shape" src="square.gif">
<button type="button" onclick="changeImage()">Change Image/button>
<script>
var list = [
"red.gif",
"square.gif"
];
var index = 0;
function changeImage() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('shape');
image.src=list[index];
}
</script>
I did find two things that will help your code work better:
I fixed your closing button tag
I iterated your index variable after the if statement and image replacement. That way your first click didn't use the same image.
This tested fine in IE with no errors.
See my code below.
var list = [
"http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg",
"http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"
];
var index = 0;
function changeImage() {
var image = document.getElementById('shape');
if (index == list.length) index = 0;
image.src=list[index];
index = index + 1;
}
<img id="shape" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" />
<button type="button" onclick="changeImage()">Change Image</button>
i m trying to change color of counter when it reached th limit
but its not working . dont know why
im new to javascrit , i dont know about jquery , please asnwer in javascript.
here is my code work :
<!DOCTYPE html>
<html>
<head>
<script>
function counting(){
var count = document.getElementById('text1').value;
var grab = document.getElementById('text1');
var count1 = document.getElementById('p1');
count1.innerHTML = count.length;
if (grab.length > 10) {
count1.style.color="#0033bb";
};
}
</script>
</head>
<body>
<textarea id="text1" onkeyup="counting();"></textarea>
<p id="p1">0</p>
</body>
</html>
grab is element, instead you want its value
if (grab.value.length > 10) {
count1.style.color="red";
}
working fiddle:
http://jsfiddle.net/entw1e39/
As others are pointing out you can also use
if (count.length > 10) {
count1.style.color="red";
}
but then i would rewrite
var grab = document.getElementById('text1');
var count = grab.value;
It is a good practice. There is no need to call DOM two times, it is cost inefficient.
grab is the input element, and grab.length is always undefined.
You may use count.length instead of grab.length.