I've created a simple calculator which tells you the letter-grade you earned based on the score you got in a class. What I'm trying to do, however, is format the text of document.write(). Instead of simply printing the text, I want it to print out text with a specific sized font, a specific background color within the webpage (just around the output of document.write()) and I also want to underline the output generated.
<html>
<head><title>Letter-Grade Calculator</title></head>
<body>
<h3>Letter-Grade Calculator</h3>
<script type="text/javascript">
var score = parseFloat(prompt ("What is your score?"));
if (score >= 90){
document.write("The score you entered is: " + score + ". Your letter grade is: A!");
}
else if (score >= 80 && score <= 89.9){
document.write("The score you entered is: " + score + ". Your letter grade is: B!");
}
else if (score >= 70 && score <= 79.9){
document.write("The score you entered is: " + score + ". Your letter grade is: C!");
}
else if (score >= 60 && score <= 69.9){
document.write("The score you entered is: " + score + ". Your letter grade is: D!");
}
else {
document.write("The score you entered is: " + score + ". Your letter grade is: F!");
}
</script>
</body>
</html>
I've tired assigning the text within each document.write() to a particular variable, then calling that variable inside document.write() (example: say I have a variable 'gradeA' and then set the first if condition to return 'document.write(gradeA);' if true) and then using certain extensions I found online to try to modify the variable. But I wasn't able to get it to output what I needed.
I've created a simple calculator which tells you the letter-grade you earned based on the score you got in a class. What I'm trying to do, however, is format the text of document.write(). Instead of simply printing the text, I want it to print out text with a specific sized font, a specific background color within the webpage (just around the output of document.write()) and I also want to underline the output generated.
<html>
<head><title>Letter-Grade Calculator</title></head>
<body>
<h3>Letter-Grade Calculator</h3>
<script type="text/javascript">
var score = parseFloat(prompt ("What is your score?"));
if (score >= 90){
document.write("The score you entered is: " + score + ". Your letter grade is: A!");
}
else if (score >= 80 && score <= 89.9){
document.write("The score you entered is: " + score + ". Your letter grade is: B!");
}
else if (score >= 70 && score <= 79.9){
document.write("The score you entered is: " + score + ". Your letter grade is: C!");
}
else if (score >= 60 && score <= 69.9){
document.write("The score you entered is: " + score + ". Your letter grade is: D!");
}
else {
document.write("The score you entered is: " + score + ". Your letter grade is: F!");
}
</script>
</body>
</html>
I've tired assigning the text within each document.write() to a particular variable, then calling that variable inside document.write() (example: say I have a variable 'gradeA' and then set the first if condition to return 'document.write(gradeA);' if true) and then using certain extensions I found online to try to modify the variable. But I wasn't able to get it to output what I needed.
Share Improve this question asked Oct 22, 2015 at 17:03 sedkilsedkil 532 gold badges2 silver badges6 bronze badges 2-
1
Why don't you just create an empty element, style it with CSS, and then change the
innerHTMLproperty of it to the text you have instead of usingdocument.write? – j08691 Commented Oct 22, 2015 at 17:07 - you can use div element and append result there using innerHTML – Sunny S.M Commented Oct 22, 2015 at 17:07
3 Answers
Reset to default 1use css and tags...
<html>
<head><title>Letter-Grade Calculator</title></head>
<body>
<h3>Letter-Grade Calculator</h3>
<style>
.red {background: red;};
.blue {background: blue;};
.green {background: green;};
.yellow {background: yellow;};
.black {background: black;};
</style>
<script type="text/javascript">
var score = parseFloat(prompt ("What is your score?"));
if (score >= 90){
document.write("<span class='red'>The score you entered is: " + score + ". Your letter grade is: A!</span>");
}
else if (score >= 80 && score <= 89.9){
document.write("<span class='green'>The score you entered is: " + score + ". Your letter grade is: B!</span>");
}
else if (score >= 70 && score <= 79.9){
document.write("<span class='blue'>The score you entered is: " + score + ". Your letter grade is: C!</span>");
}
else if (score >= 60 && score <= 69.9){
document.write("<span class='yellow'>The score you entered is: " + score + ". Your letter grade is: D!</span>");
}
else {
document.write("<span class='black'>The score you entered is: " + score + ". Your letter grade is: F!</span>");
}
</script>
</body>
</html>
Use dev element to show result here are example code:
<html>
<head><title>Letter-Grade Calculator</title></head>
<body>
<h3>Letter-Grade Calculator</h3>
<div id="result"><div>
<script type="text/javascript">
var score = parseFloat(prompt ("What is your score?"));
if (score >= 90){
document.getElementById('result').innerHTML = "The score you entered s: " + score + ". Your letter grade is: A!";
}
else if (score >= 80 && score <= 89.9){
document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: B!";
}
else if (score >= 70 && score <= 79.9){
document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: C!";
}
else if (score >= 60 && score <= 69.9){
document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: D!";
}
else {
document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: F!";
}
</script>
</body>
</html>
You can apply your choice of style etc...
If you really want to use document.write(), you will need to create elements with style or class attributes. I don't remend this as it is not extensible and really bad style.
document.write("<div style='font-family:Arial''>hello</div>");
Would write to the document a div whose font is Arial.
The better way to do this would be to use a <style> in your HTML, create a <div> element using JavaScript, set its attributes, and then append it into the document.
CSS
div.formatted{
font-family: Arial;
}
JS
var myDiv = document.createElement("div");
myDiv.innerHTML = "Hello";
myDiv.className = "formatted";
document.body.appendChild(myDiv);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745328837a4622782.html
评论列表（0条）