Jump to content
Sign in to follow this  
Fogel

Web Development Questions

Recommended Posts

So I find myself in an odd position.  I was tasked with an assignment that I could have done in Open Office (or Office Libre), which I absolutely hate soo I decided to make a web based solution.

 

Problem is that its been YEARS since I've done any web programming and I'm cramming PHP, JavaScript, and HTML/CSS all in at once.    I'm currently stuck on this problem.

 

I am trying to get a solution where the user can either click something (picture, button, whatever works) either once or multiple times and there is a visual indicator the status of said item changed.   I don't need this exact solution but for example, it could be the user pushing a button and a (div box) changes color from gray to green.  If the user pushes the same button (or a different button) it changes it from green to yellow, and so on to red and back to default.

 

I cannot figure out the solution.   So wondering if someone here can help me out.

 

 

Example code so far:

<script>

function Nom()
{
  x=document.getElementById('status')
  if (x.class.match ("insideD"))
    {
      x.class="insideN";
    }
  else
    {
      x.class="insideM";
    }

function Marg()
{
  x=document.getElementById("status");
  x.style.background-color="#FDFF00";
}
</script>

Below is the function call:

<div class="insideD" id="status">
<button type="button" onclick="Nom()">Nominal</button>
</div>

So above are the two main things I have tried.  The first option I was trying to replace the CLASS ID of the div object (insideD) with a different div.   The different div (insideN) has a different back-ground color.  This doesn't work.

 

The second way is I was trying to force a background color change for that div.   This also doesn't work

 

 

The very first method I tried was having the user click an image and it would keep rolling over to a different image with each mouse click and each image would indicate the status.   This works in the sense it changes the image one time but continuous clicking does nothing.  There is no cycling of images.  This method would probably be too time consuming anyways since I would probably need hundreds of images by the time I finished this project.  Though if its the only way, it's the only way.

 

I'm sure there is a way to get the first method working but either my syntax sucks or I'm missing a basic element to make it work.  The other thing driving me nuts is that any other code within that div (over arching div containing smaller divs) no longer work.  If I close out the div before the next set of code that follow on code works, but if I don't close it out all subsequent code no longer works, buttons included (won't even depress).

 

 

Extra Information:

Right now it is a div box with a status color (green, yellow, red) with buttons inside of that to change the background color (or so I want but cannot figure out).  This status div box is inside another div box which acts as a border and label.  And these div boxes are inside a main page div box.

 

If anyone has a possible solution please let me know.  If there is a better, cleaner solution to what I'm trying to accomplish (user can modify something that gives them visual status of at least 3 different options) than how I'm currently trying to tackle I am open to ideas.  These are simply ideas that randomly that came to me.  As long as its functional I really don't care, tbh.

 

Edited by Fogel

Share this post


Link to post
Share on other sites

Well I don't have time to look through this now, but I will say that I immediately noticed you have "onclick" instead of "onClick"

 

You're also using "getElementById" yet I see no element with the ID of "status"

 

And then your conditional; once you get to "insideM", it'll never change no matter how many clicks, even if your function worked.

Share this post


Link to post
Share on other sites

Well I don't have time to look through this now, but I will say that I immediately noticed you have "onclick" instead of "onClick"

 

You're also using "getElementById" yet I see no element with the ID of "status"

 

And then your conditional; once you get to "insideM", it'll never change no matter how many clicks, even if your function worked.

 

I will definitely try changing case on Click.

 

I had to retype it all for here, but div class="insideD" contains the id="status".   I will edit the post so it doesn't confuse anyone else that may want to comment.

 

That function I manipulated from the function I found at W3 Schools (the lightbulb function).  I'm not exactly sure why it has the "Else" to be honest as I cannot see how it would enter the else statement either, but it does because their code can cycle between the same two images.  And this is also why I am stuck ...because I cannot figure out how it will cycle through two states ...let alone 3 or more.

 

 

Really appreciate the early comments and look forward to your reply when you have a bit more time, thanks! :)

Edited by Fogel

Share this post


Link to post
Share on other sites

I would check it over for you but I'm afraid I'm on holiday stuck on mobile for the moment. :(

Share this post


Link to post
Share on other sites

 

Well I don't have time to look through this now, but I will say that I immediately noticed you have "onclick" instead of "onClick"

 

You're also using "getElementById" yet I see no element with the ID of "status"

 

And then your conditional; once you get to "insideM", it'll never change no matter how many clicks, even if your function worked.

 

I will definitely try changing case on Click.

 

I had to retype it all for here, but div class="insideD" contains the id="status".   I will edit the post so it doesn't confuse anyone else that may want to comment.

 

That function I manipulated from the function I found at W3 Schools (the lightbulb function).  I'm not exactly sure why it has the "Else" to be honest as I cannot see how it would enter the else statement either, but it does because their code can cycle between the same two images.  And this is also why I am stuck ...because I cannot figure out how it will cycle through two states ...let alone 3 or more.

 

 

Really appreciate the early comments and look forward to your reply when you have a bit more time, thanks! :)

 

 

You misunderstood me. I'm not confused by the Else statement itself, but rather how you have it written. Look again, you do NOT have it like it is on W3 - you have three different types, while W3 has two. That makes a difference because their if/else does cycle, unlike yours.

 

I'm also a little confused by the Marg thing since I don't see that referenced either.

 

Your main mistake is that Javascript does not use "class", it uses "className"

 

Try the following:

<script>

function Nom()
{
  x=document.getElementById('status')
  if (x.className.match ("insideD"))
    {
      x.className="insideN";
    }
  else
    {
      x.className="insideD";
    }

</script>



<div class="insideD" id="status">
   <button type="button" onClick="Nom()">Nominal</button>
</div>

That will change between two different classes.

Share this post


Link to post
Share on other sites

To cycle through more than two, you'll either have to hardcode more conditionals (not efficient), use an integer and add to it until you get to your limit and then reset it back down to zero, or use an array.

Share this post


Link to post
Share on other sites

I took hack at the class change ("class" vs "className") so it doesn't surprise me I had that wrong, thanks for the correction on that!

 

I cannot test it out at the moment but curiousity got the better of me so I recreated my code on W3 and it's still not working ...but I at least modified the code so it stopped giving errors.  This PC is on IE 8.0 so it's possible its a browser problem or its possible that even the other PC using Firefox still won't like it.   I will post the revised code below.  Maybe you can spot where else I am going wrong.

 

To cycle through more than two, you'll either have to hardcode more conditionals (not efficient), use an integer and add to it until you get to your limit and then reset it back down to zero, or use an array.

 

Ya, I'm not fond of the conditionals or the current implementation, but I can't even get an ugly inefficient loop to work currently.  So I'm trying to start with ugly but it works and then move on to efficient.   Though if you have an idea for a loop I can use I would be most grateful.

 

Here is the code I am using, so you can see the whole thing rather than part of the picture I originally posted.

<html>
<head>
<style>

div.box1 {
 float:left;
 border:1px solid red;
 margin-left:auto;
 margin-right:auto;
 width:130px;
 height: 120px;
 background-color:#000000;
 text-align:center;
 font-family:arial;
 font-size:11px;
 font-weight:bold;
 color:#ffffff;
 padding:8px;
 z-index:-1; }

div.box2 {
 float:left;
 border:1px solid white;
 margin-left:auto;
 margin-right:auto;
 width:112px;
 height: 88px;
 background-color:#313131;
 text-align:center;
 color:#ffffff;
 padding:8px; }


div.status1 {
 float:left;
 border:1px solid white;
 margin-left:auto;
 margin-right:auto;
 width:110px;
 height: 100px;
 background-color:#00FF00;
 text-align:center;
 color:#ffffff;
 padding:8px; }

div.status2 {
 float:left;
 border:1px solid white;
 margin-left:auto;
 margin-right:auto;
 width:110px;
 height: 100px;
 background-color:#FDFF00;
 text-align:center;
 color:#ffffff;
 padding:8px; }

div.status3 {
 float:left;
 border:1px solid white;
 margin-left:auto;
 margin-right:auto;
 width:110px;
 height: 100px;
 background-color:#FF0000;
 text-align:center;
 color:#ffffff;
 padding:8px; }

</style>
<script>

function Nom()
 {
  x=document.getElementById('status');
  if (x.className.match("status"))
   {
      x.className="status1";
   }
 }

function Yellow()
 {
  x=document.getElementById('status');
  if (x.className.match("status"))
   {
      x.className="status2";
   }
 }

function Prob()
 {
  x=document.getElementById('status');
  if (x.className.match("status"))
   {
      x.className="status3";
   }
 }

</script>
</head>

<body>

<div class="box1">
Box 1 Status 
<div class="box2" id="status"> 
<button type="button" onClick="Nom()">N</button> 
<button type="button" onClick="Yellow()">M</button> 
<button type="button" onClick="Prob()">P</button>
</div></div>


</body>
</html>


Edited by Fogel

Share this post


Link to post
Share on other sites

Check your code again. You have nothing initially assigned with a class of "status" so none of your conditionals will ever be met.

 

And since you already have box classes assigned, you'll have to assign it somewhere else, either to new divs or whatever (not sure what you're trying to change).

Share this post


Link to post
Share on other sites

I have div box 2 assigned to id "status".  Then I am trying to use the function calls to recognize that div by using elementbyid ("status") so the function knows what I'm trying to change, and I am attempting to change the properties of that div (div box 2).  

 

So if you paste that code into a W3 editor I am trying to use the push buttons to change the background color of the inside box (div box 2).  So if I push 'N' the background turns Green.   If I push 'M' the background turns Yellow.  If I push 'P' the background turns Red.  The reason I am trying to make it visual friendly is because this will be used by non-technical people in meetings so big displays with color representation means a lot ...vs static text.   I could be missing what you are trying to tell me (running on 3hrs sleep for the last couple nights) but it looks like I am using the same ID call that W3 is.   Are you saying that you cannot assign an ID to something that is using a style class?

 

 

 

At some point I am want to save these status changes into a database so if someone wants to see the status of the equipment (router, switches, etc.) at a specific point in time they can make the query.  That's a future problem.  I gotta solve this first.   Right now I can't even make the web page something the user can interact with.

 

 

I am sure there are better ways of allowing the user to interact with the page with more efficient coding, so if you have any ideas please share.   For example the powerpoint presentation of this tool allows the user to keep clicking the same button to cycle through the colors.   There aren't multiple buttons for each status.  I did that only because I couldn't figure it out how to do it the other way so I thought if I simplified it I could make it work.

Share this post


Link to post
Share on other sites
  I could be missing what you are trying to tell me (running on 3hrs sleep for the last couple nights) but it looks like I am using the same ID call that W3 is. 

 

 

You're totally missing what I'm saying.

 

Your conditionals are if (x.className.match("status")) ....THERE ARE NO CLASSES THAT MATCH THAT, so it's never going to be true. If you don't understand that, then you really shouldn't be programming :P

Share this post


Link to post
Share on other sites

 

  I could be missing what you are trying to tell me (running on 3hrs sleep for the last couple nights) but it looks like I am using the same ID call that W3 is. 

 

 

You're totally missing what I'm saying.

 

Your conditionals are if (x.className.match("status")) ....THERE ARE NO CLASSES THAT MATCH THAT, so it's never going to be true. If you don't understand that, then you really shouldn't be programming :P

 

 

ha ha hah

 

Well there is a derp moment!  That is what I deserve for going to bed at 0430 and thinking I could function normally.

 

Once you pointed that I had it completely revised in 5ish minutes so it is more efficient in addition to working lol.  Thanks.   Needed the bonk on the head.   I figured that it might be something simple that I was overlooking.

 

 

New code:

<script>

function statusChange()
 {
  x=document.getElementById('status');
  if (x.className.match("box2"))
   {
      x.className="status1";
      document.getElementById("status").innerHTML="<br><br>Nominal";
   }
  else if (x.className.match("status1"))
   {
      x.className="status2";
      document.getElementById("status").innerHTML="<br><br>Marginal";
   }
  else if (x.className.match("status2"))
   {
      x.className="status3";
      document.getElementById("status").innerHTML="<br><br>Problem";
   }
  else 
   {
      x.className="box2";
      document.getElementById("status").innerHTML=" ";
   }  
 }

</script>
</head>

<body>

<div class="box1">
Box 1 Status 
<div class="box2" id="status" onClick="statusChange()">

It is now a box that is clickable (no push buttons, YAY!) and cycles (YAY again).

Edited by Fogel

Share this post


Link to post
Share on other sites

Haha, yep, glad I can help.

 

If you'll only ever need those three, then that way is just fine, but that's the hardcoding way I was saying you may want to avoid if you added more options to it. Not really because it's less efficient, but because it's more lines of code than you need and gets a bit busy if you have, say, ten of them.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...