2 Replies - 632 Views - Last Post: 07 August 2014 - 02:30 AM

#1 adrian_carroll  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 04-August 14

JavaScript Hangman

Posted 05 August 2014 - 02:29 PM

Hey everyone,

I'm new here, and a beginner programmer. I've been writing a Hangman program that incorporates HTML/CSS with Javascript, and have been trying to get the pictures declared in the Array component of the Javascript part of the program, declared on lines 8-22:
 function initialize()
{
  var pictures = new Array(6);
  pictures[0] = new Image(100,100);
  pictures[0].src = "hangman0.png";
  pictures[1] = new Image(50, 50);
  pictures[1].src = "hangman1.png";
  pictures[2] = new Image(50, 50);
  pictures[2].src = "hangman2.png";
  pictures[3] = new Image(50, 50);
  pictures[3].src = "hangman3.png";
  pictures[4] = new Image(50, 50);
  pictures[4].src = "hangman4.png";
  pictures[5] = new Image(50, 50);
  pictures[5].src = "hangman5.png";
  pictures[6] = new Image(50, 50);
  pictures[6].src = "hangman6.png";
 
}
var totalImages = pictures.length;


to display on the HTML part of the program. I've been trying to post it in the "textarea" part of the HTML from line 135 to 143.
 <form name="game">
<pre>
<body onload="initialize()">
<textarea name="initialize()" rows="30" cols="50"
<img border="0" img src = "hangman0.png" name = "imgDisplay0" height = "250" width = "200">
 onfocus="stayAway()">
 </textarea> 
</pre><p>


Attached is the actual program so that ye can see where it fits with the overall framework of the program. Is it something do to with the Array being incomplete or am I missing lines of code from the HTML that's stopping the array from being displayed?

Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Hangman

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 125
  • View blog
  • Posts: 539
  • Joined: 15-March 14

Re: JavaScript Hangman

Posted 05 August 2014 - 04:29 PM

You can not put an image in a textArea it is designed just to hold plain text.

But you have several options to the problem.
You can set an image as a background via the CSS background property and have text over the top.

You can use a editable Div or Span to enter text instead of the textArea, but as its editable the image will move and can be deleted and copied.
<div contentEditable="true">Type here <img src="yourImage.jpg"></div>

You can move an image over the top of the textArea by using the CSS position:relative; or position:absolute; property on the image and then use CSS top:100px;left:100px; to position the image over the text area. Position relative set the position relative to where the image first appears ont the page, position absolute set the position relative to the toip left corner of the page.

You CAN NOT put and image between the <textarea> </textarea> tags and have it dislpay
Was This Post Helpful? 0
  • +
  • -

#3 ge∅  Icon User is online

  • D.I.C Addict

Reputation: 78
  • View blog
  • Posts: 553
  • Joined: 21-November 13

Re: JavaScript Hangman

Posted 07 August 2014 - 02:30 AM

Man, your HTML code is completely wrong.

Why is there a body element inside your form ?
Why is there Javascript inside a name attribute ?
The textarea tag is not closed
What is this img attribute inside the img tag ?
To what tag is the onfocus attribute supposed to belong to exactly ?


No wonder it doesn't work. Before you blame your Javascript and scratch your head for hours, test your HTML code.
If I can give you one tip : every time you need Javascript to generate a critical part of your HTML, write the HTML down in a test page with all the required CSS, make it look like what you want, then start working on the Javascript to make it appear in the DOM.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1