In JavaScript I'd want to color the users by gender

Question

In this code, we have an HTML <h1> element with the id "gender" the user's . We have defined CSS classes .female and .male to specify the color for female and male users, respectively.

<script type= "text/javascript">
// Set the user's gender (either 'male' or 'female')
    var gender = 'female';
    
    // Get the HTML element by its id
    var userNameElement = document.getElementById('gender');
    
    // Conditionally change the color based on the gender
    if (gender === 'female') {
      userNameElement.classList.add('female');
    } else {
      userNameElement.classList.add('male');
    }
</script>

<style>
.female {
    color: pink;
}

.male {
    color: blue;
}
</style>

How might this code be altered after the "gender" setting was changed by the user? I'd want the system to automatically assign the desired color based on whether we're female or male. ( Because this is not happening now, unfortunately! )

The user's gender follows from the MySQL database.

<h1 id="gender" class="mt-0 mb-0 text"><?php echo $_SESSION['username']; ?></h1>

<?php echo $_SESSION['gender']; ?>

In JavaScript I'd want to color the users by gender.

Does this answer your question? [How can I change an element's class with JavaScript?](https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript) — Heretic Monkey, Aug 21 '23 at 17:53

score 1 · Answer 1 · answered Aug 21 '23 at 17:50

1

Get the value of gender from the session variable:

<script type= "text/javascript">
// Set the user's gender (either 'male' or 'female')
    var gender = <?php echo json_encode($_SESSION['gender']); ?>;
    
    // Get the HTML element by its id
    var userNameElement = document.getElementById('gender');
    
    // Conditionally change the color based on the gender
    if (gender === 'female') {
      userNameElement.classList.add('female');
    } else {
      userNameElement.classList.add('male');
    }
</script>

answered Aug 21 '23 at 17:50

Barmar

741,623
53
500
612

Unfortunately, this didn't work either. – nemadom Aug 21 '23 at 17:54
Are there any errors in the console? – Barmar Aug 21 '23 at 17:55
No! It just won't execute the command if I change gender. – nemadom Aug 21 '23 at 17:57
2

How are you changing the gender? Using the session variable requires reloading the page. If you're changing with JavaScript, that code needs to replace the class. – Barmar Aug 21 '23 at 17:58
Change profile. This happened, I refreshed the page, but nothing changed. Only "blue".... – nemadom Aug 21 '23 at 18:00
What does `console.log(gender)` show? – Barmar Aug 21 '23 at 18:02
"undefined" show – nemadom Aug 21 '23 at 18:06
https://prnt.sc/NhsdJrPJCXLm – nemadom Aug 21 '23 at 18:09
Do you have `server_start()` before the JavaScript so the session variables will be set? How are you setting the session variable? – Barmar Aug 21 '23 at 19:17

score 1 · Accepted Answer · answered Aug 21 '23 at 18:16

1

The class names matches with the strings of the gender. So doing this should be enough:

<h1 id="gender" class="mt-0 mb-0 text <?= $_SESSION['gender'] ?>"><?php echo $_SESSION['username']; ?></h1>

Pro tip: DO NOT mix up server-side code (PHP) with client-side code (JavaScript).

answered Aug 21 '23 at 18:16

msrumon

1,250
1
10
27

Unfortunately, no coloring can be achieved with this. – nemadom Aug 21 '23 at 18:20
I don't see a reason why. [Here](https://replit.com/@msrumon/LimitedQueasyPasswords)'s the demo. – msrumon Aug 21 '23 at 18:33
Yes, defining it in a separate line doesn't cause me any problems either! :D But if the gender of the wall user changes, the color does not change! – nemadom Aug 21 '23 at 18:40
You have to use JS for that. And you have to have some mechanisms (i.e. websocket or something similar) to report to the client when the gender of a person is changed, so that the client can be updated promptly. The JS part that you have is fine for that purpose, but I think you need to use [`replace`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/replace) instead of `add`. – msrumon Aug 21 '23 at 18:48
This does not solve the problem... – nemadom Aug 22 '23 at 04:13
You need to let us know what error you still get after applying the above fix. Maybe check the browser console and see if there's any error shown there. However, I suspect the problem is in the backend code, as you've already seen that the frontend works perfectly. – msrumon Aug 22 '23 at 04:19
The problem is that the gender of the user is predetermined. (var gender = 'male';) From now on, no matter how I change my gender, it will still be blue. This is the problem. Why doesn't this color detection work automatically? – nemadom Aug 22 '23 at 04:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/254994/discussion-between-msrumon-and-nemadom). – msrumon Aug 22 '23 at 04:33

score 0 · Answer 3 · edited Aug 22 '23 at 09:04

The interesting thing is that your current code is working correctly on the js/css side of things. I made no changes to your code and get these results:

var gender = 'female';
    
// Get the HTML element by its id
var userNameElement = document.getElementById('gender');

// Conditionally change the color based on the gender
if (gender === 'female') {
  userNameElement.classList.add('female');
} else {
  userNameElement.classList.add('male');
}

.female {
    color: pink;
}

.male {
    color: blue;
}

<h1 id="gender" class="mt-0 mb-0 text">Bob</h1>

var gender = 'male';
    
// Get the HTML element by its id
var userNameElement = document.getElementById('gender');

// Conditionally change the color based on the gender
if (gender === 'female') {
  userNameElement.classList.add('female');
} else {
  userNameElement.classList.add('male');
}

.female {
    color: pink;
}

.male {
    color: blue;
}

<h1 id="gender" class="mt-0 mb-0 text">Bob</h1>

My guess is that there's something wrong with how the gender value is being stored on the server side. Maybe there's a naming typo somewhere, or some kind of caching issue?

This works perfectly for me too! But if the user changes gender, its color will not change. Why doesn't this work automatically? — nemadom, Aug 22 '23 at 04:03
Like I said, it's gotta be something going on serve-side. Are we sure the session variable is named 'gender' and not accidentally 'gedner' or something like that? Also are we sure it's being set properly when the user changes it? Also, does it change when you refresh the page? Or just not at all? — Tyler Seppala, Aug 22 '23 at 15:33

In JavaScript I'd want to color the users by gender

3 Answers3