Can't find element by its id [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
How to access SVG elements with Javascript
3 answers
My goal is to change a fill attribute of a <path> element, upon the loading of a page.
This is the path element:
<path xmlns="http://www.w3.org/2000/svg"
style="fill:#ff0000;stroke:#000000;stroke-width:0.26458332px;stroke-
linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="M 71.895501,10.754349 94.88068,-28.80154 112.52047,12.892505 Z"
id="element"/>
The path element is located inside of a map.svg file, I load the SVG in my html file, with a <object> element, since I've seen this answer, I decided to use <object> element.
index.html
This is the HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dental Ordination</title>
<script src="svg.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<object type="image/svg+xml" data="map.svg"/>
<script src="main.js"></script>
</body>
</html>
main.js
And this is my JavaScript file:
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
When executed, paths fill doesn't change. So I tried to debug it, I've put console.log($("#element").attr("fill"));, to see what it returns, and it returned undefined.
javascript jquery html css svg
asked Nov 21 at 20:18
strahinja
165
marked as duplicate by Robert Longson css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 20:51
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
How to access SVG elements with Javascript
3 answers
My goal is to change a fill attribute of a <path> element, upon the loading of a page.
This is the path element:
<path xmlns="http://www.w3.org/2000/svg"
style="fill:#ff0000;stroke:#000000;stroke-width:0.26458332px;stroke-
linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="M 71.895501,10.754349 94.88068,-28.80154 112.52047,12.892505 Z"
id="element"/>
The path element is located inside of a map.svg file, I load the SVG in my html file, with a <object> element, since I've seen this answer, I decided to use <object> element.
index.html
This is the HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dental Ordination</title>
<script src="svg.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<object type="image/svg+xml" data="map.svg"/>
<script src="main.js"></script>
</body>
</html>
main.js
And this is my JavaScript file:
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
When executed, paths fill doesn't change. So I tried to debug it, I've put console.log($("#element").attr("fill"));, to see what it returns, and it returned undefined.
javascript jquery html css svg
asked Nov 21 at 20:18
strahinja
165
marked as duplicate by Robert Longson css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 20:51
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
I suggest you to read this: stackoverflow.com/questions/14376732/…. First add anIDto your object tag, and then you have to wait it to load before querying they elements.
– D. Smania
Nov 21 at 21:09
@D.Smania I've tried that too, returns the same error:Cannot read property 'getElementById' of null at HTMLObjectElement.<anonymous>.
– strahinja
Nov 21 at 21:34
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
How to access SVG elements with Javascript
3 answers
My goal is to change a fill attribute of a <path> element, upon the loading of a page.
This is the path element:
<path xmlns="http://www.w3.org/2000/svg"
style="fill:#ff0000;stroke:#000000;stroke-width:0.26458332px;stroke-
linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="M 71.895501,10.754349 94.88068,-28.80154 112.52047,12.892505 Z"
id="element"/>
The path element is located inside of a map.svg file, I load the SVG in my html file, with a <object> element, since I've seen this answer, I decided to use <object> element.
index.html
This is the HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dental Ordination</title>
<script src="svg.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<object type="image/svg+xml" data="map.svg"/>
<script src="main.js"></script>
</body>
</html>
main.js
And this is my JavaScript file:
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
When executed, paths fill doesn't change. So I tried to debug it, I've put console.log($("#element").attr("fill"));, to see what it returns, and it returned undefined.
javascript jquery html css svg
asked Nov 21 at 20:18
strahinja
165
This question already has an answer here:
How to access SVG elements with Javascript
3 answers
My goal is to change a fill attribute of a <path> element, upon the loading of a page.
This is the path element:
<path xmlns="http://www.w3.org/2000/svg"
style="fill:#ff0000;stroke:#000000;stroke-width:0.26458332px;stroke-
linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="M 71.895501,10.754349 94.88068,-28.80154 112.52047,12.892505 Z"
id="element"/>
The path element is located inside of a map.svg file, I load the SVG in my html file, with a <object> element, since I've seen this answer, I decided to use <object> element.
index.html
This is the HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dental Ordination</title>
<script src="svg.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<object type="image/svg+xml" data="map.svg"/>
<script src="main.js"></script>
</body>
</html>
main.js
And this is my JavaScript file:
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
When executed, paths fill doesn't change. So I tried to debug it, I've put console.log($("#element").attr("fill"));, to see what it returns, and it returned undefined.
This question already has an answer here:
How to access SVG elements with Javascript
3 answers
javascript jquery html css svg
javascript jquery html css svg
asked Nov 21 at 20:18
strahinja
165
asked Nov 21 at 20:18
strahinja
165
asked Nov 21 at 20:18
strahinja
165
asked Nov 21 at 20:18
strahinja
165
asked Nov 21 at 20:18
strahinja
165
165
marked as duplicate by Robert Longson css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 20:51
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Robert Longson css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 20:51
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
I suggest you to read this: stackoverflow.com/questions/14376732/…. First add anIDto your object tag, and then you have to wait it to load before querying they elements.
– D. Smania
Nov 21 at 21:09
@D.Smania I've tried that too, returns the same error:Cannot read property 'getElementById' of null at HTMLObjectElement.<anonymous>.
– strahinja
Nov 21 at 21:34
add a comment |
I suggest you to read this: stackoverflow.com/questions/14376732/…. First add anIDto your object tag, and then you have to wait it to load before querying they elements.
– D. Smania
Nov 21 at 21:09
@D.Smania I've tried that too, returns the same error:Cannot read property 'getElementById' of null at HTMLObjectElement.<anonymous>.
– strahinja
Nov 21 at 21:34
I suggest you to read this: stackoverflow.com/questions/14376732/…. First add an
ID to your object tag, and then you have to wait it to load before querying they elements.– D. Smania
Nov 21 at 21:09
I suggest you to read this: stackoverflow.com/questions/14376732/…. First add an
ID to your object tag, and then you have to wait it to load before querying they elements.– D. Smania
Nov 21 at 21:09
@D.Smania I've tried that too, returns the same error:
Cannot read property 'getElementById' of null at HTMLObjectElement.<anonymous>.– strahinja
Nov 21 at 21:34
@D.Smania I've tried that too, returns the same error:
Cannot read property 'getElementById' of null at HTMLObjectElement.<anonymous>.– strahinja
Nov 21 at 21:34
add a comment |
1 Answer
1
active
oldest
votes
up vote
-1
down vote
Instead of
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
you should try the following:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('element').style.fill = 'blue';
})
because as you've shown, the element doesn't have a fill attribute, but a fill style.
Following this, your secondary question is what is expected: console.log($("#element").attr("fill"));. It does not have an attribute fill, so it returns undefined. Instead try console.log(element.style.fill).
answered Nov 21 at 20:23
connexo
19.8k73353
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– D. Smania
Nov 21 at 20:36
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous>
– strahinja
Nov 21 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 at 20:42
@connexo You're wrong. In general, a<path>does have bothfillattribute andfillstyle property, but an SVG path object doesn't have afillproperty bounded to thefillattribute. That's whypath.fillwould returnundefined. If you usepath.getAttribute("fill"), but this attribute is not set, it'd returnnull.
– klenium
Nov 21 at 20:43
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Doconsole.log($("#element"));.
– D. Smania
Nov 21 at 20:46
|
show 5 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
-1
down vote
Instead of
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
you should try the following:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('element').style.fill = 'blue';
})
because as you've shown, the element doesn't have a fill attribute, but a fill style.
Following this, your secondary question is what is expected: console.log($("#element").attr("fill"));. It does not have an attribute fill, so it returns undefined. Instead try console.log(element.style.fill).
answered Nov 21 at 20:23
connexo
19.8k73353
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– D. Smania
Nov 21 at 20:36
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous>
– strahinja
Nov 21 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 at 20:42
@connexo You're wrong. In general, a<path>does have bothfillattribute andfillstyle property, but an SVG path object doesn't have afillproperty bounded to thefillattribute. That's whypath.fillwould returnundefined. If you usepath.getAttribute("fill"), but this attribute is not set, it'd returnnull.
– klenium
Nov 21 at 20:43
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Doconsole.log($("#element"));.
– D. Smania
Nov 21 at 20:46
|
show 5 more comments
up vote
-1
down vote
Instead of
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
you should try the following:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('element').style.fill = 'blue';
})
because as you've shown, the element doesn't have a fill attribute, but a fill style.
Following this, your secondary question is what is expected: console.log($("#element").attr("fill"));. It does not have an attribute fill, so it returns undefined. Instead try console.log(element.style.fill).
answered Nov 21 at 20:23
connexo
19.8k73353
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– D. Smania
Nov 21 at 20:36
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous>
– strahinja
Nov 21 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 at 20:42
@connexo You're wrong. In general, a<path>does have bothfillattribute andfillstyle property, but an SVG path object doesn't have afillproperty bounded to thefillattribute. That's whypath.fillwould returnundefined. If you usepath.getAttribute("fill"), but this attribute is not set, it'd returnnull.
– klenium
Nov 21 at 20:43
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Doconsole.log($("#element"));.
– D. Smania
Nov 21 at 20:46
|
show 5 more comments
up vote
-1
down vote
up vote
-1
down vote
Instead of
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
you should try the following:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('element').style.fill = 'blue';
})
because as you've shown, the element doesn't have a fill attribute, but a fill style.
Following this, your secondary question is what is expected: console.log($("#element").attr("fill"));. It does not have an attribute fill, so it returns undefined. Instead try console.log(element.style.fill).
answered Nov 21 at 20:23
connexo
19.8k73353
Instead of
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
you should try the following:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('element').style.fill = 'blue';
})
because as you've shown, the element doesn't have a fill attribute, but a fill style.
Following this, your secondary question is what is expected: console.log($("#element").attr("fill"));. It does not have an attribute fill, so it returns undefined. Instead try console.log(element.style.fill).
answered Nov 21 at 20:23
connexo
19.8k73353
answered Nov 21 at 20:23
connexo
19.8k73353
answered Nov 21 at 20:23
connexo
19.8k73353
answered Nov 21 at 20:23
connexo
19.8k73353
19.8k73353
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– D. Smania
Nov 21 at 20:36
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous>
– strahinja
Nov 21 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 at 20:42
@connexo You're wrong. In general, a<path>does have bothfillattribute andfillstyle property, but an SVG path object doesn't have afillproperty bounded to thefillattribute. That's whypath.fillwould returnundefined. If you usepath.getAttribute("fill"), but this attribute is not set, it'd returnnull.
– klenium
Nov 21 at 20:43
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Doconsole.log($("#element"));.
– D. Smania
Nov 21 at 20:46
|
show 5 more comments
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– D. Smania
Nov 21 at 20:36
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous>
– strahinja
Nov 21 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 at 20:42
@connexo You're wrong. In general, a<path>does have bothfillattribute andfillstyle property, but an SVG path object doesn't have afillproperty bounded to thefillattribute. That's whypath.fillwould returnundefined. If you usepath.getAttribute("fill"), but this attribute is not set, it'd returnnull.
– klenium
Nov 21 at 20:43
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Doconsole.log($("#element"));.
– D. Smania
Nov 21 at 20:46
or with JQuery place this:
$("#element").css("fill", "blue"); at document ready...– D. Smania
Nov 21 at 20:36
or with JQuery place this:
$("#element").css("fill", "blue"); at document ready...– D. Smania
Nov 21 at 20:36
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous>
– strahinja
Nov 21 at 20:41
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.<anonymous>
– strahinja
Nov 21 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 at 20:42
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 at 20:42
@connexo You're wrong. In general, a
<path> does have both fill attribute and fill style property, but an SVG path object doesn't have a fill property bounded to the fill attribute. That's why path.fill would return undefined. If you use path.getAttribute("fill"), but this attribute is not set, it'd return null.– klenium
Nov 21 at 20:43
@connexo You're wrong. In general, a
<path> does have both fill attribute and fill style property, but an SVG path object doesn't have a fill property bounded to the fill attribute. That's why path.fill would return undefined. If you use path.getAttribute("fill"), but this attribute is not set, it'd return null.– klenium
Nov 21 at 20:43
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Do
console.log($("#element"));.– D. Smania
Nov 21 at 20:46
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Do
console.log($("#element"));.– D. Smania
Nov 21 at 20:46
|
show 5 more comments
I suggest you to read this: stackoverflow.com/questions/14376732/…. First add an
IDto your object tag, and then you have to wait it to load before querying they elements.– D. Smania
Nov 21 at 21:09
@D.Smania I've tried that too, returns the same error:
Cannot read property 'getElementById' of null at HTMLObjectElement.<anonymous>.– strahinja
Nov 21 at 21:34