Question

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

＆＃13;

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
  
}

＆＃13;

<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>

＆＃13;

Answer 1

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

2）你还要改变的是设置第二个输入的value属性而不是textContent

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

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
}

Answer 2

你有很多错误。这是一种正确的做法：

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

如果您想了解使用更好的做法实现此方法的方法，可以采用另一种解决方案（具有立即更新的优势）：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

你在编写代码时犯了错误，纠正了它，而不是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;

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

如何使用序数函数将输入框值转换为序号并显示它

3 个答案: