javascript - JS/HTML : Convert decimal user input to color and fill box with it

标签 javascript html function colors colorbox

我目前正在处理以下问题:我想为用户输入提供三个字段集,他们的输入将被传输到一个有四行的表中:一个字段集“红色”输入的十六进制值,一个带有字段集“绿色”输入的十六进制值,一个带有字段集“蓝色”输入的十六进制值,最后一个带有一个小框,表示给定的十进制值作为它们的颜色。

这是我走了多远:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <title>Colortheme</title>
  <link rel="stylesheet" type="text/css" href="./../css/style.css">
</head>
<body>
<div id="seite">
  <h1 id="header">Portray Colors</h1>
  <div id="content">
  <br>

  <!-- Create form for user input. -->
  <form name="color">
  Red: <input type="text" name="c"> <br>
  Green: <input type="text" name="c"> <br>
  Blue: <input type="text" name="c"> <br> 
  <input type="button" value="Paint" onclick="javascript:drawmycolor();">
  </form>

  <script language="javascript" type="text/javascript">

  a = Number(document.color.c.value);

  // Converts decimal into hexadecimal values.
 function getHexadecimalValue()
 {
    return parseInt(a, 10).toString(16);
 }

 // Creates table with hexadecimal values and color
 function drawmycolor()
 {
   if (a >= 0 && a < 255 && Math.floor(a) == a)
   {
     var thecolor = getHexadecimalValue(a);
     document.write('<table border="1" cellspacing="1" cellpadding="1">');
     document.write('<tr><th>Hexadecimal Red</th><th>' +
     'Hexadecimal Green</th><th>' +
     'Hexadecimal Blue</th><th>' +
     'Color</th></tr>');
     document.write('<tr><td>' + getHexadecimalValue(a) + '</td><td>' + 
     getHexadecimalValue(a) + '</td><td>' + 
     getHexadecimalValue(a) +
     '</td><td style="background-color:"thecolor"</td></tr>');
     document.write('</table>');
   }
   else
   {
     window.alert("This value does not refer to any RGB color.")
   }
 }

 </script>

<noscript>
<p>Da Sie die JavaScript Funktion Ihres Browsers deaktiviert haben, können
Teile diese Seite leider nicht angezeigt werden</p>
</noscript>
</center>
</div>
<div id="navigation">
<p> Zurueck zum <a href="./Startseite.html">Start</a>.</p>
</div>
<p id="footer">
<a href="http://validator.w3.org/check?uri=referer"><img
  src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" 
  height="31" width="88"></a>
</p>
</div>
</body>
</html>

我遇到的第一个问题是,如果我输入一个像 6 这样的值,显然它应该适用于 if 条件,但我仍然会收到一条警告,告诉我这些值是错误的。

第二个问题是我希望在表格的最后一行有一个小颜色框的问题。我怎样才能在那里输入一个,我怎样才能确保盒子的颜色是用户输入的小数点之一?

谢谢你的帮助!

最佳答案

问题是当这一行被执行时:

 a = Number(document.color.c.value);

a 始终是 undefined,因为该行在事件处理程序之外运行。它应该是 drawMyColor 的一部分:

function drawmycolor()
  {
  a = Number(document.color.c.value);
  ....

关于javascript - JS/HTML : Convert decimal user input to color and fill box with it,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23481788/

相关文章:

javascript - 如何为幻灯片中的每个图像添加链接?

javascript - Firefox 和 Chrome 中的 IndexedDB 错误 : Unknown error and DOMException

javascript - 水平拉伸(stretch) div 背景图像

javascript - 如何制作悬停时出现的 div,在 jquery 或 css 中悬停时停留

python - 从 re.sub 调用函数

javascript - Maven 原型(prototype) : Issue in js files : "Error merging velocity templates: Encountered ..."

javascript - 单击 <h1> 时展开 <p>

javascript - 用户共享的 GEOlocation 不适用于谷歌地点

python - 是否可以创建 "def"的列表?

c - 重构具有不同参数但在 c 中实现几乎相同的 2 个函数