Change border color Javascript - Stack Overflow

admin管理员组

文章数量:1336320

Hello im very new to HTML and Javascript.Im trying to create prompt where user able to input color they want the boarder to change its border color. can anyone help me with this problem please point out what i need and where.Thank you all who can and cant help .
Bellow is code i have so far

<script>
    var getColor = prompt("Choose your color ", "Enter the  color ");
    var color;
    var el = document.getElementById("color");
   el.innerHTML = "Whatever paragraph message.";
    if (getColor == "Yellow" || getColor == "yellow" || getColor == "YELLOW") {
        color = "#FFFF66";
        el.style.borderColor = color;
    }
    else if (getColor == "Orange" || getColor == "orange" || getColor == "ORANGE") {
        color = "#FF9900";
        el.style.borderColor = color;
    }
    else if (getColor == "Purple" || getColor == "purple" || getColor == "PURPLE") {
        color = "#6600CC";
        el.style.borderColor = color;
    }

Hello im very new to HTML and Javascript.Im trying to create prompt where user able to input color they want the boarder to change its border color. can anyone help me with this problem please point out what i need and where.Thank you all who can and cant help .
Bellow is code i have so far

<script>
    var getColor = prompt("Choose your color ", "Enter the  color ");
    var color;
    var el = document.getElementById("color");
   el.innerHTML = "Whatever paragraph message.";
    if (getColor == "Yellow" || getColor == "yellow" || getColor == "YELLOW") {
        color = "#FFFF66";
        el.style.borderColor = color;
    }
    else if (getColor == "Orange" || getColor == "orange" || getColor == "ORANGE") {
        color = "#FF9900";
        el.style.borderColor = color;
    }
    else if (getColor == "Purple" || getColor == "purple" || getColor == "PURPLE") {
        color = "#6600CC";
        el.style.borderColor = color;
    }

• javascript

Share Improve this question Follow edited Oct 24, 2016 at 4:21 A.Bachesque asked Oct 23, 2016 at 3:50 A.BachesqueA.Bachesque 711 gold badge11 silver badge33 bronze badges 2

• Please edit your question to tell us what the existing code does pared to what you want it to do. Also, take a look at this question to see if it answers your question: stackoverflow./questions/30299666/… – Seth Difley Commented Oct 23, 2016 at 4:24
• @SethDifley i just did – A.Bachesque Commented Oct 23, 2016 at 6:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I corrected your snippet to make it work. You just need to access the style.borderColor of your HTML element.

What I changed :
• #borders is for id="borders", so i changed for .borders and added the CSS class borders to your

  element

• The 'solid' value is meant for border-style property
• Your 'promptUser' variable doesn't exists so I changed it with static text

Hope this helps !

 var getColor = prompt("Choose your color ", "Enter the  color ");
 var color;
 var el = document.getElementById("color");
 el.innerHTML = "Whatever paragraph message.";
 if (getColor =="Yellow" || getColor =="yellow" || getColor =="YELLOW"){
     color = "#FFFF66";
     el.style.borderColor = color;
 }

 
.borders{
    background-color:#00ffff;
    border-color:#000000;
    border-width:2px;
    border-style:solid;
}

 
<p id="color" class="borders"></p>

本文标签： Change border color JavascriptStack Overflow