click items to add text

freddyw · December 10, 2008

hello fellow freaks.

i have a few images within a table....

<table border="5" cellspacing="5" cellpadding="5">
  <tr>
    <td width=100px, height=80px> <input type="image" src="images/eggs.jpg" width="60px" height="80px" onClick="add"; <br /> eggs</td>
    <td width=100px, height=80px><input type="image" src="images/flour.jpg" width="80px" height="80px" onClick="add"; <br /> flour</td>
    <td width=100px, height=80px><input type="image" src="images/milk.jpg" width="40px" height="80px" onClick="add"; <br /> milk</td>

what i want from here is text to appear after each image is clicked. all this is within a html file, and i want to link a spereate JS file. so if the image of eggs is clicked it would say on the page "eggs: 1" if its clicked a second time it would change to "eggs: 2" then if flour was clicked the text would read "eggs 2" "flour: 1". meanwhile i want a submit button that when clicked reads what the ingrediants reads. for example... if the user inputs 2 eggs, 1 flour, 1 milk, after hitting submit it would read, you have chose batter mix. alternatively if were different ingrediants it would read "you have chose...." if the user mixes ingrediants that arent a recipe on the page it would throw up..... "we suggest you dont make that, it wont be nice... try again, with the option to remix the ingrediants.

I would appreciate the smallest amount of help just to get me started. please?

Psycho · December 10, 2008

First lay out the page. Put in placeholder text for where you want text to appear.

Next step would be to create a function or functions to perform the different processes. If this is a fixed list of ingredients I would probably use global variables to keep count of how many of each item are used. It really kind of difficult to only give a little help. if you don't want someone to provide the solution make an attempt at solving it yourself and then posting what you come up with.

freddyw · December 10, 2008

its not that i dont want somebody to provide the solution, i just dont expect someone to give up time to do it for me. if somebody is willing, i would be very greatful

Psycho · December 10, 2008

<html>
<head>

<script>
var ingredientNames  = new Array('eggs', 'flour', 'milk');
var ingredientMeas   = new Array(''    , 'cups' , 'cups');

var recipies = new Array();

recipies[0] = '2.4.4-Cookies';
recipies[1] = '1.4.1-Bread';
recipies[2] = '0.4.1-Pie Crust';

var ingredientCount = new Array();
for (i=0; i<ingredientNames.length; i++)
{
    ingredientCount[i] = 0;
}

function addIngredient(itemName)
{
    for (i=0; i<ingredientNames.length; i++)
    {
        if (itemName==ingredientNames[i])
        {
            ingredientCount[i]++;
            break;
        }
    }

    var ingredientsHTML = '';

    for (i=0; i<ingredientNames.length; i++)
    {
        if (ingredientCount[i])
        {
            ingredientsHTML += ingredientNames[i] + ': ' + ingredientCount[i] + ' ' + ingredientMeas[i] + '<br>';
        }
    }

    document.getElementById('ingredients').innerHTML = ingredientsHTML;
}

function mixIngredients()
{
    var userIngredients = ingredientCount.join('.');
    var recipieFound = false;

    for (i=0; i<recipies.length; i++)
    {
        index = recipies[i].indexOf('-')
        recipieIngredients = recipies[i].substr(0, index);
        recipieName       =  recipies[i].substr(index+1);
        if(userIngredients==recipieIngredients)
        {
            recipieFound = true;
            break;
        }
    }

    if (recipieFound)
    {
        alert('You have chosen to make ' + recipieName);
        return true;
    }
    else
    {
        alert('we suggest you dont make that, it won\'t be nice...try again');
        for (i=0; i<ingredientCount.length; i++)
        {
            ingredientCount[i] = 0;
        }
        addIngredient(false)
        return false;
    }
}

</script>

</head>
<b>Recipies:</b><br>
<ul>
<li>Cookies:
  <ul>
    <li>2 Eggs</li>
    <li>4 Cups Flour</li>
    <li>4 Cups Milk</li>
  </ul>
</li>
<li>Bread:
  <ul>
    <li>1 Egg</li>
    <li>4 Cups Flour</li>
    <li>1 Cup Milk</li>
  </ul>
</li>
<li>Pie Crust:
  <ul>
    <li>4 Cups Flour</li>
    <li>1 Cup Milk</li>
  </ul>
</li>
</ul>

<table border="5" cellspacing="5" cellpadding="5">
  <tr>
    <td width=100px, height=80px><input type="image" src="images/eggs.jpg" width="60px" height="80px" onClick="addIngredient('eggs');"; <br /> eggs</td>
    <td width=100px, height=80px><input type="image" src="images/flour.jpg" width="80px" height="80px" onClick="addIngredient('flour');"; <br /> flour</td>
    <td width=100px, height=80px><input type="image" src="images/milk.jpg" width="40px" height="80px" onClick="addIngredient('milk');"; <br /> milk</td>
  </tr>
</table>
<br />
<b>Ingredients:</b><br>
<span id="ingredients"></span>
<br><br>
<button onclick="mixIngredients();">Mix Ingredients</button>

<html>

freddyw · December 11, 2008

hey.

thanx alot MJD your code was just what i wanted. ive tried to develop this further. what im trying 2 acchieve is if the user makes a certain recipe, that is in the list a picture of a whisk will animate for a few seconds after clicking okay. i dont want it to animate of the recipe isnt a valid one. the JS i have so far is

function left()
{
   
     whisk_x = whisk_x - 10;
     if(whisk_x <= 0)
     {
      	right();
     }else
     {
     whisk1.style.left = whisk_x - 500;
     whisk_x = whisk_x - 500;
     whisk1.style.left = whisk_x - 500;
      timerID = setTimeout("left()", 25);
    }
}


function right()
{
       whisk_x = whisk_x + 500;
       
               if(whisk_x>= max_x)
       {
                left(); 
	}
	else
	{

	   whisk_x = whisk_x + 500;
           whisk1.style.left = whisk_x + 500;
	  timerID = setTimeout("right()", 25);

	}
}





var max_x = 1024;
var whisk1 = document.getElementById("whisk");
var whisk_x = 500;

right();

and in my html i have

<img src="images/whisk.png" width="180px" height="160px" id="whisk"/>

i know my js will only make it move automatically but it isnt even doing that.

can someone please help. as you can see im doing some of the work myslf, just struggling

Psycho · December 11, 2008

Why not just have two versions of the wisk image. One that is static and one that is an animated gif? You can then swap out the images instead of trying to mainipulate the content on the page.

In any event this is an entirely different question than you originally posed and should be a new thread.

Sign In

click items to add text

Recommended Posts

freddyw

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

freddyw

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

freddyw

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information