Span with if- urgent!

Hello!
I had to input var a =windows.prompt() and then if the number is >10 have to color it red by class red , and if it is <10 have to color it class blue

Here is my code:

<head>

<head>
<style>

span.red{
 color:red;
}

spam.blue{
  color:blue;
}

</style>
</head>


<body>
<script>
var a = windows.prompt();
document.write("var a: " + a)

</script>
</body>

Please, how to combine spam with document.write()?

many thanks!!!

You’ll need to make use of an “if…then” statement, like so:

if(a > 10)
	//color it red
else
	//color it blue

You can create a span by doing this:

document.write('<span class="red">var a: ' + a + '</span>')

So, you can combine the two like this:

if(a > 10)
	document.write('red')
else
	document.write('blue')

I’d like to further comment on this.

I’ve always seen long-time developers say “don’t use document.write after a page loads, because it will re-write the whole page, including the javascript.”

Best to use the DOM, after the page loads, for output.

Just my $0.038692 worth.

V/r,

:slight_smile:

1 Like

Hello!
I tried this one and the one I just write, but noone works:

<head>

<head>
<style>

span.red{
 color:red;
}

spam.blue{
  color:blue;
}

</style>
</head>


<body>
<p id="demo"></p>
<script>
var a = windows.prompt();
document.getElementById("demo").innerHTML = '<span class="red">var a: ' + a + '</span>';

if(a > 10){
      
    document.write('red');
         }
else{
    document.write('blue');
       }

</script>
</body>

http://pastebin.com/c89ww8SE

Please, what to write instead document.write(‘red’) & (‘blue’) in this example?

Many thanks!!!

Put all lines within a function and call the function in a window onload or document ready code.

Also, in your CSS, you accidentally typed SPAM instead of SPAN for the blue.

You’re setting variable ‘a’ on a prompt, but I suspect that the rest of the code is running before the prompt is returned, so ‘a’ probably doesn’t exist while the DOM is being written to.

:slight_smile:

UPDATE: Also, you have TWO opening tags.

UPDATE: AAAAAAAND, I just noticed that you named PARAGRAPH “demo”, but you’re setting the colors for SPAN.

UPDATE: AAAAAAAND, I just noticed that you typed “windowS.prompt” when it should be “windoW.prompt”.

Okay… normally I will not do homework for someone else… but… I’ll make an exception. I think this will work only in IE.

<!DOCTYPE html>
  <head>
    <style>
    span.red{color:red;}
    span.blue{color:blue;}
    </style>
  </head>
  <body>
  <span id="demo"></span>
  <script type="text/javascript">
  var a = window.prompt();
  var obj = document.getElementById('demo');
  obj.innerHTML = "var a: " + a;
  if(a > 10){ obj.className = "red";}
  else {obj.className = "blue";}
  </script>
</body>

HTH,

:slight_smile:

Hello!
Many thanks- good news, it DOES WORK IN MOZILL TOO!

Please, just one question, for any interested: what chapters in tutorials, (any of them) are to learn thorowly to understand that completely?
Many thanks!!!

You’d have to check the table of contents of the tutorial to know the answer to that question.

If this is for homework, then you might be turning in something that is more advanced than the teacher is ready to convey to the students. ESPECIALLY if the teacher is teaching you to use document.write. (shudder)

:slight_smile:

CodeAcademy is pretty good. This one talks about if…then: http://www.codecademy.com/courses/conditionals-in-javascript/1/1

And for document.write(), it basically just spits whatever you pass into it onto the DOM. So since a span is just: <span>something</span>, you just do document.write("<span>something</span>").

Edit: haha yea what @WolfShade said

Please, what if I want to color just a part of innerHTML (just a f.e.)?
Many thanks!!!

Hello!
I think I shoudl do sth like:

document.write(if a>10 {} else { } some_text…???

…because I have to change span color regarding to if a is >10 or <10…

many thanks!!!

The code I supplied has a conditional that only checks to see if the value is GREATER THAN 10 or LESS THAN OR EQUAL TO 10. If you need to keep the color unchanged if the value IS EQUAL TO 10, then you can certainly add another condition.

But the code I gave you does what you originally asked for (except for if the value == 10).

:slight_smile:

UPDATE: And you were correct… I tested it in FF and it worked, there, too. :smile:

I moved 10 posts to a new topic: Use of Alert Prompt and Confirm

If you want to set it so that if a == 10, the color doesn’t change:

This way, if a == 10, nothing happens and the color will remain the same.

HTH,

:slight_smile:

@mkjs I agree with others

Lose the prompt
Forget using document.write

eg.

<html><head><title>color change test</title>
<style type="text/css">
#test_div {
  margin-top: 1em;
  background-color: lightblue;
 }
</style>
</head><body>
	<div>
		<p>Enter color name</p>
		<input id="color_input" type="text" value="lightgreen" />
		<button id="btn">test it</button>
	</div>
	<div id="test_div">The color of this should change</div>
	<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.addEventListener("click", function() {
		var color_value = document.getElementById("color_input").value;
		var test_div = document.getElementById("test_div");
		test_div.setAttribute('style', "background-color: " + color_value);	
	});
	</script>
</body></html>

Please, how an I get just a colored and “var a” not?

Many thanks!!!

Hello, please how can I get Var a: 8 // red 8?

http://pastebin.com/UwpgfR2p

Ahh, well that’s best done by placing a span around the content that you want to be colored.

The CSS

coloredText {
    color: red;
}

The JavaScript

function colorText(content, className) {
    var span = document.createElement('span'),
        text = document.createTextNode(content);
    span.appendChild(text);
    span.classList.add(className);
    return span;
}

var coloredText = colorText('var a: ' + a, 'coloredText');
document.getElementById('demo').appendChild(coloredText);

Work that in to your system and you should be fine.