如何使用序数函数将输入框的值转换为序数并进行显示
How to use ordinal function to turn input box values into ordinal number and display it
我试图从一个输入框中获取输入,使用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;
此外,您需要将输入类型更改为文本,而不是数字
相关文章:
- 如何在JavaScript中将字符串转换为函数引用
- 如何在Javascript中将JSon对象转换为数组
- 使用JS将数组转换为json对象
- 如何使用json将对象列表从java转换为javascript
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 在Javascript中转换对象数组
- 将数字转换为一定数量的硬币
- 将纯文本URL转换为可单击链接
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何使用js将SNAPSHOT内部版本号转换为3位数的整数
- 如何将TypeScript对象转换为普通对象
- 检测个位数整数时正在转换毫秒
- 从javascript到jquery的转换
- DOM事件通过JSON转换为java
- 将圆柱体转换为弯管
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- JavaScript代码问题:我正在将对象转换为数组
- 如何将字母转换为二进制代码
- 如何使用序数函数将输入框的值转换为序数并进行显示