My email vaildation is working correctly now.
But, I would like to alter the message color from black to red by styling it somehow.
I have attempted such things as:
{
message = "Please, enter a valid email";
message.style.color == 'red';
writeMessage(message);
return false;
}
The insertion being:
message.style.color == 'red';
The result is the entire script breaks.
Any ideas? Should I be using CSS for this?
Thank you,
Matthew
You would use javascript but we need a container to hold this message. Do you already have maybe a set of span tags to display the message? We can style this element.
I can help you with a working example.
Your variable 'message' is a string. Only HTML element objects have a 'style' property. And your code doesn't include the 'writeMessage()' function, so that could be a problem as well.
My advice would be to find a JavaScript tutorial so you can learn the fundamentals. The W3 Schools is popular for their tutorials. But you're just going to keep bumping into problems until you have a better grasp of JavaScript.
Does writeMessage() work correctly (ignoring the lack of style)? Please post that function so that we might work on altering it to facilitate your needs.
My email vaildation is working correctly now.
But, I would like to alter the message color from black to red by styling it somehow.
I have attempted such things as:
Code Redacted
The insertion being:
message.style.color == 'red';
The result is the entire script breaks.Any ideas? Should I be using CSS for this?
Thank you,
Matthew
hello Mathew,
here is a simple, silly example that I think you can look over to get an idea on how to use javascript to modify text and styling on an element.
<!doctype html>
<html>
<head>
<script>
function validate()
{
var score = document.getElementById("score");
var message = document.getElementById("message");
if (score.value >= 7 && score.value <= 10)
{
message.innerHTML = "Great job on your score!";
message.style.color = "green";
}
else if (score.value >= 4 && score.value <= 6)
{
message.innerHTML = "Your average, do better!";
message.style.color = "orange";
}
else if (score.value >= 1 && score.value <= 3)
{
message.innerHTML = "Not so great, I'm not impressed!";
message.style.color = "brown";
}
else
{
message.innerHTML = "Your input doesn't appear to be a valid score!";
message.style.color = "red";
}
}
</script>
</head>
<body>
<label>Enter your score (1-10)</label>
<input type="text" id="score" />
<button id="btn1" onclick="validate()">Validate</button><br/>
<span id="message"></span>
</body>
</html>
hope it helps..
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.