PLEASE HELP ME! -( innerHTML

i have a code here

<html>
<head>
<title>Javascript - Emotions</title>
<script type="text/javascript">
function emotions()
{
var t1=setTimeout("document.getElementById('emotion1' ) .innerHTML='Happy'  +document.getElementById('name').value",1000);
var t4=setTimeout("document.getElementById('thankyou') .innerHTML='Thank You'",2000);
}
function clearText()
{
document.getElementById('name').value='';
document.getElementById('emotion1').innerHTML='';
document.getElementById('thankyou').innerHTML='';
}
</script>
</head>
<body>
<form>
<input type="text" id="name">
<input type="button" value="Submit" onClick="emotions()">
<input type="button" value="Clear" onClick="clearText()"><br />
<p id="emotion1"></p>
<p id="emotion2"></p>
<p id="emotion3"></p>
<p style="padding-left:2em" id="thankyou"></p>
</form>
</body>
</html> 

is this possible to add another emotions here

("document.getElementById('emotion1' ) .innerHTML='Happy' 

? because i like to lessen my work…example is

.innerHTML='Happy' 'Sad'

? i try this but no lucky at all :frowning:

var t1=setTimeout("document.getElementById('emotion1' ) .innerHTML='Happy'  +document.getElementById('name').value",1000);

creating many lines of codes looks my notepad like scratch paper :(… please help me

If I understand your question correctly, this is what you want:


<html>
<head>
<title>Javascript - Emotions</title>
<script type="text/javascript">
function emotions()
{
var t1=setTimeout("document.getElementById('emotion1' ) .innerHTML='Happy '  +document.getElementById('name').value",1000);
var t2=setTimeout("document.getElementById('emotion2' ) .innerHTML='Why are you Sad '  +document.getElementById('name').value + '?'",1000);
var t4=setTimeout("document.getElementById('thankyou') .innerHTML='Thank You'",2000);
}
function clearText()
{
document.getElementById('name').value='';
document.getElementById('emotion1').innerHTML='';
document.getElementById('thankyou').innerHTML='';
}
</script>
</head>
<body>
<form>
<input type="text" id="name">
<input type="button" value="Submit" onClick="emotions()">
<input type="button" value="Clear" onClick="clearText()"><br />
<p id="emotion1"></p>
<p id="emotion2"></p>
<p id="emotion3"></p>
<p style="padding-left:2em" id="thankyou"></p>
</form>
</body>
</html>

I simply:

  1. Copied the line that began “t1”
  2. Pasted it as a new line and modified the TWO PLACES the numeral ‘1’ appeared with a ‘2’
  3. Then changed the text (as desired)

It is important that there are enough <p id=“emotionX”> for the number of new emotions you create.

i only want to add another emotions here

.innerHTML='Happy' 

w/o creating new lines of codes…

What happens if you replace the word ‘Happy’ with another word? That will change the emotion.


var t1=setTimeout("document.getElementById('emotion1' ) .innerHTML='Frustrated '  +document.getElementById('name').value",1000);

To add a new emotion you must add ONE line of code (for each new emotion)

ok…i though its possible to add another emotions without creating new lines of code…thank you…
maybe i need to create new one…and hope this one can easy to you to help me. :slight_smile:

i created pics so that you will understand what i mean…thanks in advance help

this one is using 1 webpage only i dont know is this using javascript to create next slide menu…please help me again…

It’s likely you’d have to use some sort of library or organized library in order to shorten what you’d have to write to that. ParkinT did a good job of explaining the correct situation/solution :).