current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -2 down vote favorite

Right, I am trying to make this game for javascript and to customize it, I have the game working which is the basic guess your number game what im trying to do is figure out how to get my output to be an image rather then be text. Here is my code.

  <script type="text/javascript">




    function yourGuess() {
    guess = document.getElementById("guess").value;
    guesses = document.getElementById("output");

    if (guess == numToGuess) {
        guesses.value = guesses.value + "\r" + "You have guessed correctly! ("+guess+")";
    } else if (guess > numToGuess) {
        guesses.value = guesses.value + "\r" + "Your guessing too high!("+guess+")";

    } else {
        guesses.value = guesses.value + "\r" + "Your guessing too low!("+guess+")";
    }
    }

    var numToGuess = Math.floor(Math.random()*100);
    </script>

    <fieldset style="float: left; width: 380px; background-color:pink;">
     <legend >Inputs</legend>
    <label for="guess">Your Guess:</label>
 <input type="text" id="guess" value="Between 1-100" />
 <input type="button" onclick="yourGuess()" value="submit" /><br />
 <input type="button" onclick="" value="Show My Guesses" />  
 <input type="button" onclick="" value="New Game" /><br />
 </fieldset>

<fieldset style="float: left; width: 380px; background-color:red;">
 <legend style="background-color:Lime; color:Blue;"> Output </legend>
 <textarea id="output" name="output" rows="5" style="width: 100%;"></textarea>
</fieldset>

Here is a Jsfiddle link: http://jsfiddle.net/92PCR/2/

Can anyone help?

share|improve this question

put on hold as unclear what you're asking by Mitch Wheat, JK., Josh, Henry Keiter, Nejat yesterday

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer 1

up vote 1 down vote accepted

It's as simple as adding an image element:

<img id="outputimg" src="//:0" alt="output" />

and then alter the source of that image like this:

document.getElementById("outputimg").src = "yourNumber.gif";
share|improve this answer
    
Im slightly confused, I added the document.getElementByID etc to the Jscrpit but I cant figure out where I need to add the html section of the code? –  Saint yesterday
    
What do you want your output to look like? I might have misread your question. –  Ke Vin yesterday
    
Instead of outputting text, I want the output to be an image. Such as an Arrow pointing down if the guess to high, or a Checkmark if you guessed correctly etc etc. Im trying to display images rather then text as my output. –  Saint yesterday
    
Like this? jsfiddle.net/92PCR/3 –  Ke Vin yesterday
    
Exactly, Ha you are awesome. Much obliged to you. –  Saint yesterday

Not the answer you're looking for? Browse other questions tagged or ask your own question.