How to change the text through JS without having class and id? [closed]
-1
There are a couple of <text> blocks in the code which have identical class names. In these blocks, there are <tspan> tags. I need to change the letter in the <tspan> tags from “a” to “p” for each <text> block.
Block itself:
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">1000</tspan>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">2000</tspan>
</text>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">3000</tspan>
</text>
javascript html svg
edited Nov 15 '18 at 18:43
Justin T.
597313
asked Nov 15 '18 at 17:44
euppi98euppi98
41
closed as off-topic by Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera, PM 77-1 Nov 15 '18 at 17:49
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera
If this question can be reworded to fit the rules in the help center, please edit the question.
|
show 2 more comments
-1
There are a couple of <text> blocks in the code which have identical class names. In these blocks, there are <tspan> tags. I need to change the letter in the <tspan> tags from “a” to “p” for each <text> block.
Block itself:
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">1000</tspan>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">2000</tspan>
</text>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">3000</tspan>
</text>
javascript html svg
edited Nov 15 '18 at 18:43
Justin T.
597313
asked Nov 15 '18 at 17:44
euppi98euppi98
41
closed as off-topic by Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera, PM 77-1 Nov 15 '18 at 17:49
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera
If this question can be reworded to fit the rules in the help center, please edit the question.
Please show us the js you already wrote to attempt addressing the issue. stackoverflow.com/help/how-to-ask
– colecmc
Nov 15 '18 at 17:47
1
Look for that tag inside the known class
– charlietfl
Nov 15 '18 at 17:47
Will the tspan with theaalways be the first one in the list of tspans inside the<text>element?
– mhodges
Nov 15 '18 at 17:50
Usedocument.querySelectorAllto get all oftextelements and iterate over all of them withforEach. jsfiddle.net/t2gbd6wk
– hev1
Nov 15 '18 at 17:50
Neithertextnortspanare valid HTML elements. If they are meant to be custom elements, they're also invalid. Custom elements must have a dash-in the name.
– connexo
Nov 15 '18 at 17:55
|
show 2 more comments
-1
-1
-1
There are a couple of <text> blocks in the code which have identical class names. In these blocks, there are <tspan> tags. I need to change the letter in the <tspan> tags from “a” to “p” for each <text> block.
Block itself:
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">1000</tspan>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">2000</tspan>
</text>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">3000</tspan>
</text>
javascript html svg
edited Nov 15 '18 at 18:43
Justin T.
597313
asked Nov 15 '18 at 17:44
euppi98euppi98
41
There are a couple of <text> blocks in the code which have identical class names. In these blocks, there are <tspan> tags. I need to change the letter in the <tspan> tags from “a” to “p” for each <text> block.
Block itself:
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">1000</tspan>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">2000</tspan>
</text>
</text>
<text class="deal-label--text" transform="translate(8, 17)" style="fill: rgb(255, 255, 255); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif; font-size: 13px; font-weight: 600;">
<tspan style="font-family: symbol-olymp, "Open Sans";">a</tspan>
<tspan dx="1px">3000</tspan>
</text>
javascript html svg
javascript html svg
edited Nov 15 '18 at 18:43
Justin T.
597313
asked Nov 15 '18 at 17:44
euppi98euppi98
41
edited Nov 15 '18 at 18:43
Justin T.
597313
asked Nov 15 '18 at 17:44
euppi98euppi98
41
edited Nov 15 '18 at 18:43
Justin T.
597313
edited Nov 15 '18 at 18:43
Justin T.
597313
edited Nov 15 '18 at 18:43
Justin T.
597313
597313
asked Nov 15 '18 at 17:44
euppi98euppi98
41
asked Nov 15 '18 at 17:44
euppi98euppi98
41
asked Nov 15 '18 at 17:44
euppi98euppi98
41
41
closed as off-topic by Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera, PM 77-1 Nov 15 '18 at 17:49
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera
If this question can be reworded to fit the rules in the help center, please edit the question.
closed as off-topic by Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera, PM 77-1 Nov 15 '18 at 17:49
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Praveen Kumar Purushothaman, Madhur Bhaiya, charlietfl, SiddAjmera
If this question can be reworded to fit the rules in the help center, please edit the question.
Please show us the js you already wrote to attempt addressing the issue. stackoverflow.com/help/how-to-ask
– colecmc
Nov 15 '18 at 17:47
1
Look for that tag inside the known class
– charlietfl
Nov 15 '18 at 17:47
Will the tspan with theaalways be the first one in the list of tspans inside the<text>element?
– mhodges
Nov 15 '18 at 17:50
Usedocument.querySelectorAllto get all oftextelements and iterate over all of them withforEach. jsfiddle.net/t2gbd6wk
– hev1
Nov 15 '18 at 17:50
Neithertextnortspanare valid HTML elements. If they are meant to be custom elements, they're also invalid. Custom elements must have a dash-in the name.
– connexo
Nov 15 '18 at 17:55
|
show 2 more comments
Please show us the js you already wrote to attempt addressing the issue. stackoverflow.com/help/how-to-ask
– colecmc
Nov 15 '18 at 17:47
1
Look for that tag inside the known class
– charlietfl
Nov 15 '18 at 17:47
Will the tspan with theaalways be the first one in the list of tspans inside the<text>element?
– mhodges
Nov 15 '18 at 17:50
Usedocument.querySelectorAllto get all oftextelements and iterate over all of them withforEach. jsfiddle.net/t2gbd6wk
– hev1
Nov 15 '18 at 17:50
Neithertextnortspanare valid HTML elements. If they are meant to be custom elements, they're also invalid. Custom elements must have a dash-in the name.
– connexo
Nov 15 '18 at 17:55
Please show us the js you already wrote to attempt addressing the issue. stackoverflow.com/help/how-to-ask
– colecmc
Nov 15 '18 at 17:47
Please show us the js you already wrote to attempt addressing the issue. stackoverflow.com/help/how-to-ask
– colecmc
Nov 15 '18 at 17:47
1
1
Look for that tag inside the known class
– charlietfl
Nov 15 '18 at 17:47
Look for that tag inside the known class
– charlietfl
Nov 15 '18 at 17:47
Will the tspan with the
a always be the first one in the list of tspans inside the <text> element?– mhodges
Nov 15 '18 at 17:50
Will the tspan with the
a always be the first one in the list of tspans inside the <text> element?– mhodges
Nov 15 '18 at 17:50
Use
document.querySelectorAll to get all of text elements and iterate over all of them with forEach. jsfiddle.net/t2gbd6wk– hev1
Nov 15 '18 at 17:50
Use
document.querySelectorAll to get all of text elements and iterate over all of them with forEach. jsfiddle.net/t2gbd6wk– hev1
Nov 15 '18 at 17:50
Neither
text nor tspan are valid HTML elements. If they are meant to be custom elements, they're also invalid. Custom elements must have a dash - in the name.– connexo
Nov 15 '18 at 17:55
Neither
text nor tspan are valid HTML elements. If they are meant to be custom elements, they're also invalid. Custom elements must have a dash - in the name.– connexo
Nov 15 '18 at 17:55
|
show 2 more comments
1 Answer
1
active
oldest
votes
1
You can use combinators of querySelector. The query .deal-label--text > tspan means tspan elements which are children of the element that has deal-label class. document.querySelectorAll returns the pseudo array has every HTML element object that matches the query. You can convert the pseudo array into the real array with Array.from method and you can work on each value in array with .forEach method.
Array.from(document.querySelectorAll('.deal-label--text > tspan')).forEach(element => element.innerText = 'p');
answered Nov 15 '18 at 18:00
hsl0hsl0
134
Thank you, and now how to replace all the elements? The querySelectorAll selector does not work.
– euppi98
Nov 19 '18 at 16:59
@euppi98 I changed the answer to be able to replace all the elements. Check it out.
– hsl0
Nov 20 '18 at 7:42
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can use combinators of querySelector. The query .deal-label--text > tspan means tspan elements which are children of the element that has deal-label class. document.querySelectorAll returns the pseudo array has every HTML element object that matches the query. You can convert the pseudo array into the real array with Array.from method and you can work on each value in array with .forEach method.
Array.from(document.querySelectorAll('.deal-label--text > tspan')).forEach(element => element.innerText = 'p');
answered Nov 15 '18 at 18:00
hsl0hsl0
134
Thank you, and now how to replace all the elements? The querySelectorAll selector does not work.
– euppi98
Nov 19 '18 at 16:59
@euppi98 I changed the answer to be able to replace all the elements. Check it out.
– hsl0
Nov 20 '18 at 7:42
add a comment |
1
You can use combinators of querySelector. The query .deal-label--text > tspan means tspan elements which are children of the element that has deal-label class. document.querySelectorAll returns the pseudo array has every HTML element object that matches the query. You can convert the pseudo array into the real array with Array.from method and you can work on each value in array with .forEach method.
Array.from(document.querySelectorAll('.deal-label--text > tspan')).forEach(element => element.innerText = 'p');
answered Nov 15 '18 at 18:00
hsl0hsl0
134
Thank you, and now how to replace all the elements? The querySelectorAll selector does not work.
– euppi98
Nov 19 '18 at 16:59
@euppi98 I changed the answer to be able to replace all the elements. Check it out.
– hsl0
Nov 20 '18 at 7:42
add a comment |
1
1
1
You can use combinators of querySelector. The query .deal-label--text > tspan means tspan elements which are children of the element that has deal-label class. document.querySelectorAll returns the pseudo array has every HTML element object that matches the query. You can convert the pseudo array into the real array with Array.from method and you can work on each value in array with .forEach method.
Array.from(document.querySelectorAll('.deal-label--text > tspan')).forEach(element => element.innerText = 'p');
answered Nov 15 '18 at 18:00
hsl0hsl0
134
You can use combinators of querySelector. The query .deal-label--text > tspan means tspan elements which are children of the element that has deal-label class. document.querySelectorAll returns the pseudo array has every HTML element object that matches the query. You can convert the pseudo array into the real array with Array.from method and you can work on each value in array with .forEach method.
Array.from(document.querySelectorAll('.deal-label--text > tspan')).forEach(element => element.innerText = 'p');
answered Nov 15 '18 at 18:00
hsl0hsl0
134
edited Nov 20 '18 at 7:39
answered Nov 15 '18 at 18:00
hsl0hsl0
134
answered Nov 15 '18 at 18:00
hsl0hsl0
134
answered Nov 15 '18 at 18:00
hsl0hsl0
134
134
Thank you, and now how to replace all the elements? The querySelectorAll selector does not work.
– euppi98
Nov 19 '18 at 16:59
@euppi98 I changed the answer to be able to replace all the elements. Check it out.
– hsl0
Nov 20 '18 at 7:42
add a comment |
Thank you, and now how to replace all the elements? The querySelectorAll selector does not work.
– euppi98
Nov 19 '18 at 16:59
@euppi98 I changed the answer to be able to replace all the elements. Check it out.
– hsl0
Nov 20 '18 at 7:42
Thank you, and now how to replace all the elements? The querySelectorAll selector does not work.
– euppi98
Nov 19 '18 at 16:59
Thank you, and now how to replace all the elements? The querySelectorAll selector does not work.
– euppi98
Nov 19 '18 at 16:59
@euppi98 I changed the answer to be able to replace all the elements. Check it out.
– hsl0
Nov 20 '18 at 7:42
@euppi98 I changed the answer to be able to replace all the elements. Check it out.
– hsl0
Nov 20 '18 at 7:42
add a comment |
Please show us the js you already wrote to attempt addressing the issue. stackoverflow.com/help/how-to-ask
– colecmc
Nov 15 '18 at 17:47
1
Look for that tag inside the known class
– charlietfl
Nov 15 '18 at 17:47
Will the tspan with the
aalways be the first one in the list of tspans inside the<text>element?– mhodges
Nov 15 '18 at 17:50
Use
document.querySelectorAllto get all oftextelements and iterate over all of them withforEach. jsfiddle.net/t2gbd6wk– hev1
Nov 15 '18 at 17:50
Neither
textnortspanare valid HTML elements. If they are meant to be custom elements, they're also invalid. Custom elements must have a dash-in the name.– connexo
Nov 15 '18 at 17:55