Question

我很难搞清楚我在这个过程中的下一步。我想要完成的是从下拉菜单中获取颜色，并使用javascript将其附加到div元素。

任何帮助都将不胜感激。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebToMed Website Developer Test</title>
<meta http-equiv="Content-Type" name="description" content="This is a simple CSS, HTML, and JS Test" />
    <style>
    /* Add all CSS enteries here */
    .test-red{
    background-color: #ff0000;
}
.test-green{
    background-color: #008000;
}
.test-blue{
    background-color: #0000ff;
}
.test-yellow{
    background-color: #ffff00;
}
#div_1{
    float: left;width:300px;height: 50px;text-align: left;
}
#div_2{
    margin:0px width:100%;height: 50px;text-align: center;
}
#div_3{
    float: right; 
    width:350px;
    height: 50px;
    color: white;
    text-align: right;
}
#div_4{
    text-align: center;
    height: 300px;
}
#div_5{
    margin: 0 auto;
    text-align: center;
}
#div_6{
    border:3px solid black;
    margin-top: 10px;
    padding:20px;
}
.container{
    column-count: 2;

}
#select-1{

}

    </style>

    <script>
    /* Add any JavaScript here */
    var getDiv=function(){

    }
    function changeBorder() {
    document.getElementById("select-1").style.borderColor = document.getElementById("col-selc")
}

    </script>
</head>
<body>


<!-- Modify this block of divs - START -->
<div class="container">
    <div id="div_1" class="test-red">LEFT COL STATIC WIDTH 300px</div>

    <div id="div_2" class="test-green">CENTER COL DYNAMIC WIDTH</div>
    <div id="div_3" class="test-blue">RIGHT COL STATIC WIDTH 350px</div>
</div>
<div id="div_4" class="test-yellow">
    <div id="div_5">
    This text should be centered horizontally and vertically.
    </div>
</div>
<div id="div_6">
    Div Selector:
    <!-- Place Div Select Here -->
    <select id=select-1>
        <option class='1' vlaue=1>Div-1</option>
        <option class='2' vlaue=2>Div-2</option>
        <option class='3' vlaue=3>Div-3</option>
        <option class='4' vlaue=4>Div-4</option>
    </select>

    <br /><br />
    Color Selector:
    <!-- Place Color Select Here -->
    <select id="col-selc">
        <option id="color1" class='1' vlaue=1>Gray-1</option>
        <option class='2' vlaue=2>Gray-2</option>
        <option class='3' vlaue=3>Gray-3</option>
    </select>
    <!-- Place "Change Color" Button Here -->
    <button type="button" onclick="changeBorder()">Change Color</button>
</div>
<!-- Modify this block of divs - END -->


<br />
<hr />
<div><strong>Your end result should look like this (do not modify anything below this line):</strong></div>
<br />
<img src="http://careers-test.webtomed.com/assets/images/test.gif" width="1024" height="484" />

</body>
</html>

Answer 1

您需要在下拉列表中获取所选项目的值（应该是实际颜色）：

function changeBorder() {
    var dropdown = document.getElementById("col-selc");
    var selectedColor = dropdown.options[dropdown.selectedIndex].value;
    document.getElementById("select-1").style.borderColor = selectedColor;
}

你还拼写了＃34;价值＆＃34;到处都是错误的会妨碍这种工作

使用javascript和html选择器

1 个答案: