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,
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>
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.
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,
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)
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).
UPDATE: And you were correct⌠I tested it in FF and it worked, there, too. 
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,
@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?
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.