Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

66%

+4 −1

Q&A Dye all label asterisks Red with vanilla JavaScript

I want to dye all label asterisks Red with vanilla JavaScript. CSS isn't good for this because it would dye both asterisks and colons (:) instead just the asterisks: .labelWithColonAndAsterisk:af...

2 answers · posted 3y ago by deleted user · edited 3y ago by deleted user

Question javascript html validation contact-form accessibility

#3: Post edited by (deleted user) · 2021-11-14T04:09:15Z (almost 3 years ago)

Copy Link

Raw

Markdown

I want to dye all label asterisks Red with vanilla JavaScript.
CSS isn't good for this because it would dye both asterisks and colons (`:`) instead just the asterisks:
```css
.labelWithColonAndAsterisk:after {
content:":*";
color:red;
}
```
So, I need a (vanilla) JavaScript solution.
Here is what I have already tried and failed:
```js
const labelsWithAnAsterisk = document.querySelectorAll("label");
labelsWithAnAsterisk.forEach((element) => {
if (element.textContent.indexOf("*") !== -1) {
element.textContent.indexOf("*").style.color = "Red";
}
});
```
> Uncaught TypeError: document.qeurySelectorAll is not a function
at <anonymous>:1:39
~~I understand that one element can't have two color properties (black for colon and red for asterisk) and this might explain the error.~~
~~**Anyway, how would you achieve that goal?**~~

I want to dye all label asterisks Red with vanilla JavaScript.
CSS isn't good for this because it would dye both asterisks and colons (`:`) instead just the asterisks:
```css
.labelWithColonAndAsterisk:after {
content:":*";
color:red;
}
```
So, I need a (vanilla) JavaScript solution.
Here is what I have already tried and failed:
```js
const labelsWithAnAsterisk = document.querySelectorAll("label");
labelsWithAnAsterisk.forEach((element) => {
if (element.textContent.indexOf("*") !== -1) {
element.textContent.indexOf("*").style.color = "Red";
}
});
```
> Uncaught TypeError: document.qeurySelectorAll is not a function
at <anonymous>:1:39
**How would you achieve that goal?**

#2: Post edited by (deleted user) · 2021-11-14T04:04:55Z (almost 3 years ago)

Copy Link

Raw

Markdown

I want to dye all label asterisks Red with vanilla JavaScript.
CSS isn't good for this because it would dye both asterisks and colons (`:`) instead just the asterisks:
```css
.labelWithColonAndAsterisk:after {
content:":*";
color:red;
}
```
So, I need a (vanilla) JavaScript solution.
Here is what I have already tried and failed:
```js
~~const labelsWithAnAsterisk = document.qeurySelectorAll("label");~~
labelsWithAnAsterisk.forEach((element) => {
if (element.textContent.indexOf("*") !== -1) {
element.textContent.indexOf("*").style.color = "Red";
}
});
```
> Uncaught TypeError: document.qeurySelectorAll is not a function
at <anonymous>:1:39
I understand that one element can't have two color properties (black for colon and red for asterisk) and this might explain the error.
**Anyway, how would you achieve that goal?**

I want to dye all label asterisks Red with vanilla JavaScript.
CSS isn't good for this because it would dye both asterisks and colons (`:`) instead just the asterisks:
```css
.labelWithColonAndAsterisk:after {
content:":*";
color:red;
}
```
So, I need a (vanilla) JavaScript solution.
Here is what I have already tried and failed:
```js
const labelsWithAnAsterisk = document.querySelectorAll("label");
labelsWithAnAsterisk.forEach((element) => {
if (element.textContent.indexOf("*") !== -1) {
element.textContent.indexOf("*").style.color = "Red";
}
});
```
> Uncaught TypeError: document.qeurySelectorAll is not a function
at <anonymous>:1:39
I understand that one element can't have two color properties (black for colon and red for asterisk) and this might explain the error.
**Anyway, how would you achieve that goal?**

#1: Initial revision by (deleted user) · 2021-03-21T08:37:11Z (over 3 years ago)

Copy Link

Raw

Markdown

Dye all label asterisks Red with vanilla JavaScript

I want to dye all label asterisks Red with vanilla JavaScript.

CSS isn't good for this because it would dye both asterisks and colons (`:`) instead just the asterisks:

```css
.labelWithColonAndAsterisk:after {
    content:":*"; 
    color:red;
}
```

So, I need a (vanilla) JavaScript solution.

Here is what I have already tried and failed:

```js
const labelsWithAnAsterisk = document.qeurySelectorAll("label");
labelsWithAnAsterisk.forEach((element) => {
    if (element.textContent.indexOf("*") !== -1) {
        element.textContent.indexOf("*").style.color = "Red";
    }
});
```

> Uncaught TypeError: document.qeurySelectorAll is not a function
    at <anonymous>:1:39

I understand that one element can't have two color properties (black for colon and red for asterisk) and this might explain the error.

**Anyway, how would you achieve that goal?**

javascript html validation contact-form accessibility

Communities

Post History