如何通过输入框的值修改div的border-color属性？

你现存的代码存在以下几个问题：

• 缺少id为inpx的输入框元素，无法获取你输入的颜色值
• div的id属性语法错误，id=divx" 缺少左引号，需修正为id="divx"
• 按钮的onClick属性没有绑定myFunction()函数，点击后不会触发逻辑
• JS方法拼写错误：document.getElemntByID 正确写法为document.getElementById（注意补全缺失的字母e，该方法名大小写敏感，结尾是Id而非全大写的ID）
• div没有设置基础的边框宽度与样式，默认边框为none，仅修改borderColor不会显示可见的边框效果

正确可运行的完整代码示例 #

<!-- 输入框，用来输入颜色值 -->
<input type="text" id="inpx" placeholder="输入颜色值，如red、#f00、rgb(255,0,0)">
<!-- 绑定点击事件的按钮 -->
<button onClick="myFunction()">修改边框颜色</button>
<!-- 带基础边框样式的div -->
<div id="divx" style="width: 200px; height: 200px; border: 2px solid #000; margin-top: 10px;"></div>

<script>
function myFunction() {
  // 获取输入框的颜色值
  var color = document.getElementById("inpx").value; 
  // 修改div的边框颜色
  document.getElementById("divx").style.borderColor = color;
}
</script>

内容的提问来源于stack exchange，提问作者GAMING WITH ZHAMPTED