如何使用序数函数将输入框的值转换为序数并进行显示

How to use ordinal function to turn input box values into ordinal number and display it

本文关键字：序数 转换 显示 函数 何使用 输入      更新时间：2023-09-26

我试图从一个输入框中获取输入，使用getGetOrdinal（）函数将其转换为序数形式，然后使用getO（）函数在第二个框中显示。我想知道在getGetOrdinal（）函数使用输入框值之前，是否必须将其转换为整数。

function getGetOrdinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}
 
 
function getO() {
 var inOne = document.getElementById("one").value;//*takes value
 var result = getGetOrdinal("inOne");//* passes inOne into getGetOrdinal
 var inTwo = document.getElementById("two");
 inTwo.textContent = result;//*displays ordinal number in second box
  
}
<form>
  
<form>
<input id="one" type="number"><!-- first input box-->
<button type="button" onlick="getO()">submit</button><!-- should turn value of firsdt input box into ordinal number-->
<input type="number" id="two"><!-- should display ordinal number-->
</form>

1）您应该将getGetOrdinal("inOne")更改为getGetOrdinal(inOne)。您传递的不是变量，而是一个包含inOne的字符串。

2） 您还需要更改的是设置第二个输入的value属性，而不是textContent

3） 最后，让我们确保getGetOrdinal函数的argument是一个数字

function getGetOrdinal(n) {
  n = +n; // This is for numbers like '5e2'
  if(isNaN(n)) { // <-- 3
   throw new Error('You should provide a number as the argument for getGetOrdinal function')
  }
  var s = ["th","st","nd","rd"],
      v = n%100;
  return n+(s[(v-20)%10]||s[v]||s[0]);
}

function getO() {
  var inOne = document.getElementById("one").value;
  var result = getGetOrdinal(inOne); // <-- 1
  var inTwo = document.getElementById("two");
  inTwo.value = result; // <-- 2
}

您有不少错误。这里有一个正确的方法：

function getGetOrdinal(n) {
  var s = ["th", "st", "nd", "rd"],
    v = n % 100;
  return n + (s[(v - 20) % 10] || s[v] || s[0]);
}
function getO() {
  var inOne = document.getElementById("one").value; // takes value
  var result = getGetOrdinal(parseInt(inOne)); // passes inOne into getGetOrdinal
  var inTwo = document.getElementById("two");
  inTwo.value = result; // displays ordinal number in second box
}
<form>
  <!-- first input box-->
  <input id="one" type="number">
  <!-- should turn value of first input box into ordinal number-->
  <button type="button" onclick="getO()">submit</button>
  <!-- should display ordinal number-->
  <input type="text" id="two">
</form>

如果你想知道一种通过更好的实践来做到这一点的方法，这里有另一个解决方案（它有立即更新的好处）：

var inOne = document.getElementById("one"); // input
var inTwo = document.getElementById("two"); // output
function getGetOrdinal(n) {
  var s = ["th", "st", "nd", "rd"],
    v = n % 100;
  return n + (s[(v - 20) % 10] || s[v] || s[0]);
}
function getO() {
  // convert to number
  var number = +inOne.value;
  
  // error checking
  if (isNaN(number) || parseInt(number) !== number || number <= 0) {
    inTwo.value = "invalid positive integer";
  } else {
    var result = getGetOrdinal(number); // passes inOne into getGetOrdinal
    inTwo.value = result; // displays ordinal number in second box
  }
}
inOne.addEventListener('input', getO);
<form>
  <!-- first input box-->
  <input id="one" type="number" placeholder="Choose a number">
  <!-- should display ordinal number-->
  <input id="two" type="text" placeholder="Ordinal number" readonly="readonly">
</form>

您在编写代码时犯了错误，请更正，将onlick改为onclick

<button type="button" onclick="getO()">submit</button>

这里还有一个错误，他将输入值输入到inOne中，但他将作为string not variable 传递

 var inOne = document.getElementById("one").value;//*takes value
 var result = getGetOrdinal("inOne");//* passes inOne into getGetOrdinal

textContent只能用于文本元素，而不能用于表单元素。需要使用value

inTwo.value = result;

此外，您需要将输入类型更改为文本，而不是数字

相关文章：