CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
codewiz
codewiz

Reputation: 531

How to use javascript for an element whose id is defined as a php function?

I am building a website and in one of the pages,i am using a php function to define id of element.The reason is,that element is repeated and id should be unique and javascript can also work according to change in element .The problem i am having is,i cannot define javascript function according to change in element id. This is the code: HTML PART:

<div id="star1s<?php the_ID(); ?>" class="rating"></div>

Here in html part,the_ID() is the php function which changes the element id to make the element id unique. So for example,if the_ID() returns 11, the div id becomes stars1s11. Here is the javascript part: JAVASCRIPT PART:

 var getstarid = "<?php the_ID();?>";

function rating1(stars) {
  var ratingfill = stars;
  var rating_integer = Math.floor(ratingfill);
  var rating_decimal = ratingfill % 1;
  var rating_dec_trimmed = rating_decimal.toFixed(1);
  if ((rating_dec_trimmed == 0.1) || (rating_dec_trimmed == 0.2) ||
    (rating_dec_trimmed == 0.3) || (rating_dec_trimmed == 0.4)) {
    rate1.style.width = ((40 * rating_integer) + 18) + 'px';
  }
  if ((rating_dec_trimmed == 0.6) || (rating_dec_trimmed == 0.7) ||
    (rating_dec_trimmed == 0.8) || (rating_dec_trimmed == 0.9)) {
    rate1.style.width = ((40 * rating_integer) + 28) + 'px';
  }
  if (rating_dec_trimmed == 0.5) {
    rate1.style.width = ((40 * rating_integer) + 20) + 'px';
  }
  if (rating_dec_trimmed == 0) {
    rate1.style.width = (40 * rating_integer) + 'px';
  }
}
var getrate1 = "<?php echo $ratingonequery;?>";
rating1(getrate1);

In the Javascript part,i want to replace "rate1" in "rate1.style.width" with the corresponding id according to php function the_ID().So,for example if the_ID() returns 11 the id should be star1s11

I will also share style STYLE PART:

.rating {
  font-size: 48px;
  color: #0095f9;
  display: inline-block;
  overflow: hidden;
}

.rating::before {
  content: "\2605\2605\2605\2605\2605"
}

I will also put a screenshot of the output. This code is used for displaying stars according to user value fetched from the database.

Screenshot of the output when

Thanking in advance.

Upvotes: 0

Views: 182

Answers (1)

Lennart
Lennart

Reputation: 1560

To achieve what you're looking to do you should replace rate1 with document.getElementById("star1s"+getstarid), where getstarid is the star id as defined in your PHP. So your javascript code should look like this:

var getstarid = "<?php the_ID();?>";

function rating1(stars) {
  var ratingfill = stars;
  var rating_integer = Math.floor(ratingfill);
  var rating_decimal = ratingfill % 1;
  var rating_dec_trimmed = rating_decimal.toFixed(1);
  if ((rating_dec_trimmed == 0.1) || (rating_dec_trimmed == 0.2) ||
    (rating_dec_trimmed == 0.3) || (rating_dec_trimmed == 0.4)) {
    document.getElementById("star1s"+getstarid).style.width = ((40 * rating_integer) + 18) + 'px';
  }
  if ((rating_dec_trimmed == 0.6) || (rating_dec_trimmed == 0.7) ||
    (rating_dec_trimmed == 0.8) || (rating_dec_trimmed == 0.9)) {
    document.getElementById("star1s"+getstarid).style.width = ((40 * rating_integer) + 28) + 'px';
  }
  if (rating_dec_trimmed == 0.5) {
    document.getElementById("star1s"+getstarid).style.width = ((40 * rating_integer) + 20) + 'px';
  }
  if (rating_dec_trimmed == 0) {
    document.getElementById("star1s"+getstarid).style.width = (40 * rating_integer) + 'px';
  }
}
var getrate1 = "<?php echo $ratingonequery;?>";
rating1(getrate1);

Upvotes: 1

Related Questions