Jump to content

Only changes the first element...


Jurgen Rutten

Recommended Posts

My script only changes the first element it finds on the page and then stops, why is this?

I made this script because I don't want certain info to be displayed if certain server-sided info isn't displayed, but I don't have access to the serverside because.. I don't know, it's job-related.

What am I doing wrong?

 

The script is supposed to change all elements with ID "apoPrice" if one element of class "price" is avaible.

 

But it only seems to change the first... 

 

 

function CheckApoPriceDisplay() {
  var bddo = document.getElementsByClassName("price")[0];
  alert (bddo)
  
  if (bddo){
  var op = true
  alert (op)
  }
  
  else {
  var op = false
    alert (op)
  }
  
  
  if (op) {
  document.getElementById('apoPrice').style.color = "Darkgreen";
    document.getElementById('apoPrice').style.fontWeight = "Bold";
        document.getElementById('apoPrice').style.display = "block";
  }
  else {
    document.getElementById('apoPrice').style.display = "none";
  }
}

Link to comment
Share on other sites

Without seeing the HTML, CSS and JS working together, the following is just a SWAG at your problem.

What makes me suspect is your statement:
  "The script is supposed to change all elements with ID "apoPrice" if one element of class "price" is avaible. "

ID values must be unique, so when you say "all elements with ID...", it may be where things must be changed.

Hope this helps resolve your problem.
BTW, welcome to the forums.

Link to comment
Share on other sites

Thank you! Great to be here.

 

Can you say what you mean with the ID's have to be unique? How can I solve this?

Your suspicion is very correct btw. 

 

An example of the full implementation is one like this:

 

Quote

<!DOCTYPE html>
<html>
<body>

<p><img src="https://wecarepro.be/img/cms/PharmaBelgium-Belmedis_Logo2.png" onload="CheckApoPriceDisplay()" width="1" height="1" /></p>


<p class="price"><p>€5.99</p></p>

<div id="apoPrice"><p>€3.02</p></div>
<hr style="border: 2px solid red;">


<p class="price"><p>€14.50</p></p>

<div id="apoPrice"><p>€7.90</p></div>
<hr style="border: 2px solid red;">

<script>
function CheckApoPriceDisplay() {
  var op = document.getElementsByClassName("price")[0];
  
  
  if (op) {
  document.getElementById('apoPrice').style.color = "Darkgreen";
    document.getElementById('apoPrice').style.fontWeight = "Bold";
        document.getElementById('apoPrice').style.display = "block";
  }
  else {
    document.getElementById('apoPrice').style.display = "none";
  }
}


</script>

</body>
</html>

 

Thanks!

Link to comment
Share on other sites

You have at least two <div> tags with id="apoPrice".

That's like going on to an airport and calling to your friend, "Hi Jack". 
Who's going to respond? 
Your friend, another passenger or the TSA agent named "Jack" with a gun?

Change references to id="apoPrice1", id="apoPrice2" as needed
so that only unique id values are used in your program.

Note also that your "else" condition will never be reached with your logic.
It will ALWAYS find the first element when looking for "getElementsByClassName('price')[0]
so it cannot return false for the 'else' statement to be executed.

Edited by JMRKER
Link to comment
Share on other sites

But that's exactly the point, 

Let's say that we are at the airport and one element of price (let's name him the ambassador) is present, I want every element named APOPRICE (the security guards) to react.

Same if more ambassadors are present, so the guards know what to do.

They should not be called when the price isn't there.

 

The price tag is created in another script, but that isn't made by me, and is dependant for people being logged-in or not. I can't make changes to that. 

 

 

Basic:

  1. IF (element classname 'price' exists)
  2. THEN (change the styling for all elements with ID 'apoprice')
  3. ELSE (Hide all elements with id 'apoprice')

 

 

Link to comment
Share on other sites

Using your analogy, the 'ambassador' is not part of the security force (police) and should not be named as part of security.

And if there is more than one 'ambassador', who is to respond when the 'ambassador' is paged?

If both the 'ambassador' and the 'security force' are involved, then they should be classified as 'authority'.
If both are to be notified or contacted at the same time, don't use ID as the target as all SHOULD have UNIQUE names.
Instead look into the use of 'class' if you need to determine who is collectively in 'authority'.

Note: Your project should contain appropriately named elements suitable for the project.  In this case not ambassasor, police or authority
When grouping different IDs for identification consider using a 'class' to be able to collect the representatives.

 

 

Link to comment
Share on other sites

I am unclear as to what you are trying to do with your project so I am just making a guess
as to what you are trying to accomplish with your initial post.
Therefore just use my post below for information if it of no use to your project.

Note that I do not use any ID references except for the new button selection.

Also, I opened your Logo for display. 
If you do not intend it to be displayed then don't include it in the program
instead of setting the height and width of the image to be 1px.

Normally the 'onload' is not included in the image display.
It could have been put into the <body> element, but I chose to put it in the
JS initialization section along with the button event logic.

 

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- Modified from: https://w3schools.invisionzone.com/topic/61788-only-changes-the-first-element/ -->

<style>
 hr { border: 2px solid red; }
 .hide { display: none; }
</style>

</head><body>

<p>
  <img src="https://wecarepro.be/img/cms/PharmaBelgium-Belmedis_Logo2.png"
   title='Logo' width="200" height="100" />
</p>

<p class="price">€5.99</p>
<p class="cost">€3.02</p></p>
<hr>

<p class="price">€14.50</p>
<p class="cost">€7.90</p></p>
<hr>

<button id="btnHide"> Cost Displays </button>

<script>
console.clear();

function CheckApoPriceDisplay() {
  let p = document.getElementsByClassName("price");
  for (let el of p) {
    el.style.color = "Darkgreen";
    el.style.fontWeight = "Bold";
  }

  let c = document.getElementsByClassName("cost");
  for (let el of c) {
    el.style.color = "Darkred";
    el.style.fontWeight = "Bold";
  }
}
function HideCosts() {
  let c = document.getElementsByClassName("cost");
  for (let el of c) { el.classList.toggle('hide'); }
}

function init() {
  CheckApoPriceDisplay();
  document.getElementById('btnHide').addEventListener( 'click', HideCosts );
} init();
</script>

</body></html>

Hopefully this helps with your understanding if it is not of benefit to your project.

Good Luck! :)

 

Edited by JMRKER
Tag completion fix.
Link to comment
Share on other sites

Sounds very strange to use a price in which security is assigned?

Why not use passport number, keep number in security required array. When passport number matches store security required passport number, in a id referenced element ul listing  or table then count the number of pasport number within it, if greater than 0 highlight and call security.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...