Mixing
Can't find element by its id [duplicate]
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 '18 at 20:18
strahinjastrahinja
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 '18 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 |
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 '18 at 20:18
strahinjastrahinja
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 '18 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.
– Shidersz
Nov 21 '18 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 '18 at 21:34
add a comment |
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 '18 at 20:18
strahinjastrahinja
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 '18 at 20:18
strahinjastrahinja
165
asked Nov 21 '18 at 20:18
strahinjastrahinja
165
asked Nov 21 '18 at 20:18
strahinjastrahinja
165
asked Nov 21 '18 at 20:18
strahinjastrahinja
165
asked Nov 21 '18 at 20:18
strahinjastrahinja
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 '18 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 '18 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.
– Shidersz
Nov 21 '18 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 '18 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.
– Shidersz
Nov 21 '18 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 '18 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.– Shidersz
Nov 21 '18 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.– Shidersz
Nov 21 '18 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 '18 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 '18 at 21:34
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 20:23
connexoconnexo
22k83557
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– Shidersz
Nov 21 '18 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 '18 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 '18 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 '18 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"));.
– Shidersz
Nov 21 '18 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
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 '18 at 20:23
connexoconnexo
22k83557
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– Shidersz
Nov 21 '18 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 '18 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 '18 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 '18 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"));.
– Shidersz
Nov 21 '18 at 20:46
|
show 5 more comments
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 '18 at 20:23
connexoconnexo
22k83557
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– Shidersz
Nov 21 '18 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 '18 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 '18 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 '18 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"));.
– Shidersz
Nov 21 '18 at 20:46
|
show 5 more comments
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 '18 at 20:23
connexoconnexo
22k83557
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 '18 at 20:23
connexoconnexo
22k83557
answered Nov 21 '18 at 20:23
connexoconnexo
22k83557
answered Nov 21 '18 at 20:23
connexoconnexo
22k83557
answered Nov 21 '18 at 20:23
connexoconnexo
22k83557
22k83557
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– Shidersz
Nov 21 '18 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 '18 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 '18 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 '18 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"));.
– Shidersz
Nov 21 '18 at 20:46
|
show 5 more comments
or with JQuery place this:$("#element").css("fill", "blue");at document ready...
– Shidersz
Nov 21 '18 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 '18 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 '18 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 '18 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"));.
– Shidersz
Nov 21 '18 at 20:46
or with JQuery place this:
$("#element").css("fill", "blue"); at document ready...– Shidersz
Nov 21 '18 at 20:36
or with JQuery place this:
$("#element").css("fill", "blue"); at document ready...– Shidersz
Nov 21 '18 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 '18 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 '18 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 '18 at 20:42
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens.
– strahinja
Nov 21 '18 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 '18 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 '18 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"));.– Shidersz
Nov 21 '18 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"));.– Shidersz
Nov 21 '18 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.– Shidersz
Nov 21 '18 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 '18 at 21:34