Jump to content

Bulbs in javascript


Recommended Posts

Hello.I started learning javascript and my professor give me this to solve. Its program that turn on and turn off bulbs on different ways. It have number of bulbs and number of variations . The problem is that i don't know how to use function deleteBulbs because when i type smaller number , those who left must get changed with blank.jpg but they won't. Please help me and sorry for my bad english. I uploaded images with problem. In first example, 3 are turned on . So in example 2,when i type 1 and 0, last bulb is turned off and other 2 must be blank but they are not in my case.

<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<p> <b> Task: </b> There are <i> n </i> bulbs in the room, each of which is turned on by a separate switch. How many ways can a room be lit? </p>
 Number of bulbs: <input id = "numOfBulbs" type = "number"> </p>
Number of variations<input id="numOfVariations" type="number"></p>
<p> <button type="button" onclick="numOfVariations();">Light up </button> </p>
<img id="image7" src="blank.jpg">
<img id="image6" src="blank.jpg">
<img id="image5" src="blank.jpg">
<img id="image4" src="blank.jpg">
<img id="image3" src="blank.jpg">
<img id="image2" src="blank.jpg">
<img id="image1" src="blank.jpg">
<img id="image0" src="blank.jpg">
<p id="solution"></p>
<script>
function numOfVariations()
{
var n, i, p=1,v,s;
n=document.getElementById("numOfBulbs").value;
if(n>8 || n<=0)
{
window.alert("Incorrect number of bulbs!");
var s=document.getElementById("image0").value;
s.src="blank.jpg" ;
s=document.getElementById("image2").value;
s.src="blank.jpg";
s=document.getElementById("image3").value;
s.src="blank.jpg";
s=document.getElementById("image4").value;
s.src="blank.jpg";
s=document.getElementById("image5").value;
s.src="blank.jpg";
s=document.getElementById("image6").value;
s.src="blank.jpg";
s=document.getElementById("image7").value;
s.src="blank.jpg";
document.getElementById("solution").innerHTML="Total variations: 0";
return;
}
v=document.getElementById("numOfVariations").value;
for (i=1;i<=n;i++) p*=2;
if((v<0) || (v>=p)){
window.alert("Incorrect number of variations!");
var s=document.getElementById("image0").value;
s.src="blank.jpg" ;
s=document.getElementById("image1").value;
s.src="blank.jpg";
s=document.getElementById("image2").value;
s.src="blank.jpg";
s=document.getElementById("image3").value;
s.src="blank.jpg";
s=document.getElementById("image4").value;
s.src="blank.jpg";
s=document.getElementById("image5").value;
s.src="blank.jpg";
s=document.getElementById("image6").value;
s.src="blank.jpg";
s=document.getElementById("image7").value;
s.src="blank.jpg";
document.getElementById("solution").innerHTML="Total variations:"+ p;
return;
}
document.getElementById("solution").innerHTML="Total variations:"+ p;
p=1;
for(i=0;i<n;i++){
if(v&p) turnOn(i);
else
turnOff(i);
p*=2;
}

}
function turnOff(i)
{
var s;
if(i==0){
s=document.getElementById("image0");
s.src="off.jpg";
}
if(i==1){
s=document.getElementById("image1");
s.src="off.jpg";
}
if(i==2){
s=document.getElementById("image2");
s.src="off.jpg";
}
if(i==3){
s=document.getElementById("image3");
s.src="off.jpg";
}
if(i==4){
s=document.getElementById("image4");
s.src="off.jpg";
}
if(i==5){
s=document.getElementById("image5");
s.src="off.jpg";
}
if(i==6){
s=document.getElementById("image6");
s.src="off.jpg";
}
if(i==7){
s=document.getElementById("image7");
s.src="off.jpg";
}
}
function turnOn(i)
{
var s;
if(i==0){
s=document.getElementById("image0");
s.src="on.jpg";
}
if(i==1){
s=document.getElementById("image1");
s.src="on.jpg";
}
if(i==2){
s=document.getElementById("image2");
s.src="on.jpg";
}
if(i==3){
s=document.getElementById("image3");
s.src="on.jpg";
}
if(i==4){
s=document.getElementById("image4");
s.src="on.jpg";
}
if(i==5){
s=document.getElementById("image5");
s.src="on.jpg";
}
if(i==6){
s=document.getElementById("image6");
s.src="on.jpg";
}
if(i==7){
s=document.getElementById("image7");
s.src="on.jpg";
}
}
function deleteBulbs(i)
{
var s;
if(i==0){
s=document.getElementById("image0");
s.src="blank.jpg";
}
if(i==1){
s=document.getElementById("image1");
s.src="blank.jpg";
}
if(i==2){
s=document.getElementById("image2");
s.src="blank.jpg";
}
if(i==3){
s=document.getElementById("image3");
s.src="blank.jpg";
}
if(i==4){
s=document.getElementById("image4");
s.src="blank.jpg";
}
if(i==5){
s=document.getElementById("image5");
s.src="blank.jpg";
}
if(i==6){
s=document.getElementById("image6");
s.src="blank.jpg";
}
if(i==7){
s=document.getElementById("image7");
s.src="blank.jpg";
}

}
</script>
</body>
</html>

y are not. 

example1.png

example2.png

bulbs translated.rar

Link to post
Share on other sites

first of all let's try to solve what do you mean step by step because i'm also not an expert but i may tell you what to do or where to find the hint for doing it,

1- the first thing can you get the value that you add it to the text input or not ?

    please answer it to get to the second step.

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.

Loading...
×
×
  • Create New...