改变文本框背景颜色在点击外部后。

huangapple go评论69阅读模式
英文:

Changing textbox background color upon clicking out

问题

I'm trying to get the textbox background color to change on clicking out to rgb(137,200,46) if the input is correct and to rgb(B 231,0,100) if it's not, otherwise to stay white. The incorrect color shows up alright upon a wrong sequence, but I keep getting green even if the textbox is empty, instead of pink (since an empty textbox is incorrect, for this task). As an example, a correct input would be "79927398713" and I'm just typing "123" or leaving it empty to get an incorrect one. I tried both values !== "" and values !== 0, each as a && in the first if and as an added if else. I tried the same things with box and integers, but at this point I'm just grasping at straws. Could you please tell me where I'm going wrong? Please go easy on me, I'm still very rgb(137,200,46).

function checkLuhn(array) {
  let nDigits = array.length;
  let nSum = 0;
  let isSecond = false;
  for (let i = nDigits - 1; i >= 0; i--) {
    let d = array[i] - '0';
    if (isSecond == true)
      d = d * 2;

    nSum += parseInt(d / 10, 10);
    nSum += d % 10;
    isSecond = !isSecond;
  }
  return (nSum % 10 == 0);
}

function verify() {
  var box = document.getElementById("cardBox");
  const values = box.value.split("");
  const integers = values.map((value) => parseInt(value.trim(), 10));
  if ((checkLuhn(integers)) && (values !== ""))
  {
    box.style.background = "rgb(137,200,46)";
  } else
  {
    box.style.background = "rgb(231,0,100)";
  }
}
<!--Debit/Credit Card input; I set the type to password as an added layer of security-->
<label for="card" data-mlr-text>Card</label>
<input type="password" id="cardBox" placeholder="Write your Credit/Debit Card here" title="Write your Credit/Debit Card number" pattern="\d{10,19}" required onfocusout=verify()>

(Note: I've left out the code that doesn't require translation.)

英文:

I'm trying to get the textbox background color to change on clicking out to rgb(137,200,46) if the input is correct and to rgb(B 231,0,100) if it's not, otherwise to stay white. The incorrect color shows up alright upon a wrong sequence, but I keep getting green even if the textbox is empty, instead of pink (since an empty textbox is incorrect, for this task). As an example, a correct input would be "79927398713" and I'm just typing "123" or leaving it empty to get an incorrect one. I tried both values !== &quot;&quot; and values !== 0, each as a &amp;&amp; in the first if and as an added if else. I tried the same things with box and integers, but at this point I'm just grasping at straws. Could you please tell me where I'm going wrong? Please go easy on me, I'm still very rgb(137,200,46).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function checkLuhn(array) {
  let nDigits = array.length;
  let nSum = 0;
  let isSecond = false;
  for (let i = nDigits - 1; i &gt;= 0; i--) {
    let d = array[i] - &#39;0&#39;;
    if (isSecond == true)
      d = d * 2;

    nSum += parseInt(d / 10, 10);
    nSum += d % 10;
    isSecond = !isSecond;
  }
  return (nSum % 10 == 0);
}

function verify() {
  var box = document.getElementById(&quot;cardBox&quot;);
  const values = box.value.split(&quot;&quot;);
  const integers = values.map((value) =&gt; parseInt(value.trim(), 10));
  if ((checkLuhn(integers)) &amp;&amp; (values !== &quot;&quot;))
  {
    box.style.background = &quot;rgb(137,200,46)&quot;;
  } else
  {
    box.style.background = &quot;rgb(231,0,100)&quot;;
  }
}

<!-- language: lang-html -->

&lt;!--Debit/Credit Card input; I set the type to password as an added layer of security--&gt;
&lt;label for=&quot;card&quot; data-mlr-text&gt;Card&lt;/label&gt;
&lt;input type=&quot;password&quot; id=&quot;cardBox&quot; placeholder=&quot;Write your Credit/Debit Card here&quot; title=&quot;Write your Credit/Debit Card number&quot; pattern=&quot;\d{10,19}&quot; required onfocusout=verify()&gt;

<!-- end snippet -->

答案1

得分: 0

看起来你试图检查一个包含字符串的数组。
values !== ""
其中values是一个数组,所以这将始终为真。

你需要检查 box.value !== "" 或更好的是 !box.value

英文:

It looks like you are trying to check array with string.
values !== ""
Where values is array, so this will be always true.

You need to check box.value !== “” or better !box.value

huangapple
  • 本文由 发表于 2023年4月11日 11:07:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75982123.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定