html-input 相关问题

网站编程新手。我正在尝试用从客户端获取的 2 个输入字段创建一个基本的求和方程。 ` 网站编程新手。我正在尝试使用从客户端获取的 2 个输入字段创建一个基本的求和方程。 ` </head> <body> <form> <input type="number" id="x"> <input type="number" id="y"> <script> let x = document.getElementById('x').nodeValue; let y = document.getElementById('y').nodeValue; function sum(x, y) { let sum = x + y; alert(sum); } </script> <input type="submit" value="submit" onclick="sum(x, y)"> </form> </body> ` 我在浏览器（Opera Gx，如果重要的话）中运行我的代码，当我选择两个数字，然后点击提交时，它会显示警报框。然而出现的是： “[对象 HTMLInputElement][对象 HTMLInputElement]” 我知道正在使用输入元素，但我显然希望我的 sum 函数返回 2 个输入字段的总和。我不明白我做错了什么。代码中的问题与您检索输入字段的值的方式有关。您使用的是 nodeValue 属性，这不是获取输入元素值的正确方法。相反，您应该使用 value 属性来检索输入元素的值。这是更正后的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sum Calculator</title> </head> <body> <form> <input type="number" id="x"> <input type="number" id="y"> <input type="submit" value="Submit" onclick="sum()"> </form> <script> function sum() { // Retrieve the values of the input fields let x = parseFloat(document.getElementById('x').value); let y = parseFloat(document.getElementById('y').value); // Check if the input values are valid numbers if (!isNaN(x) && !isNaN(y)) { // Perform the sum let result = x + y; alert("The sum is: " + result); } else { alert("Please enter valid numbers in both fields."); } } </script> </body> </html> 您应该在调用函数时检查输入字段的值（而不是像现在一样在脚本运行时检查一次）。为此，您可以使用 .value 属性，而不是在元素上使用 nodeValue : </head> <body> <form> <input type="number" id="x"> <input type="number" id="y"> <script> let x = document.getElementById('x'); let y = document.getElementById('y'); function sum(x, y) { let sum = x.value + y.value; alert(sum); } </script> <input type="submit" value="submit" onclick="sum(x, y)"> </form> </body> 但是您还需要将这些值解析为数字： </head> <body> <form> <input type="number" id="x"> <input type="number" id="y"> <script> let x = document.getElementById('x'); let y = document.getElementById('y'); function sum(x, y) { let sum = parseFloat(x.value) + parseFloat(y.value); alert(sum); } </script> <input type="submit" value="submit" onclick="sum(x, y)"> </form> </body>

javascript html input alert html-input

回答 2 投票 0

如何使用 Tailwind CSS 设置 HTML 文件输入样式？

当我遇到这个问题时，我花了大约 20 分钟在这里的一篇文章中找到答案：https://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css / 不过我已经滚动了...

tailwind-css html-input

回答 2 投票 0

HTML 输入类型=“文件”无法拉起 Pixel / android 14 组合的相机

我将其发布在 GitHub 的react-native-webview 讨论线程中，以防他们需要添加支持，但想看看是否有人有任何想法：免责声明：我是网络

android pixel html-input react-native-webview android-14

回答 1 投票 0

输入的最小值和最大值实际上是做什么的？

我期望的最小值和最大值将可选选项限制在两个值之间的范围内。例如，他们在中这样做。但是 type=&q...

html html-input

回答 2 投票 0

mwc-文本字段输入模式不适用于反斜杠或竖线

我正在尝试向 mwc-textfield 输入添加模式以过滤文件名。我的模式似乎是有效的 js 正则表达式，并且似乎适用于 html 输入，但不能作为 mwc-textfield 上的模式。我...

javascript typescript html-input material-components lit

回答 1 投票 0

仅具有底部边框的输入文本字段

如何设置文本输入字段的样式，使其只有像这样的边框底部？预期的文本输入字段

html css border html-input

回答 7 投票 0

有没有办法改变文件输入中按钮的颜色？

对于文件输入 ()，有一个按钮显示“选择文件”。它的颜色是灰色的，我想改变这种颜色。因为从技术上来说它不是 <

css html-input

回答 1 投票 0

chrome setSelectionRange() 在 oninput 处理程序中不起作用

我正在使用一些自动完成代码。 setSelectionRange() 用于选择 oninput 事件处理程序中已完成的文本。它至少在 Firefox 14 中有效，但在 Chrome(6, 17) 中无效。简化...

javascript google-chrome cross-browser html-input

回答 5 投票 0

Step 属性在 <input type="datetime-local"> 和 <input type="time">

我无法理解和中的step属性。它似乎在所有主要浏览器中都没有得到很好的实现。步骤=“1&...

html forms html-input

回答 1 投票 0

如何为输入设置默认值[type =“date”] [重复]

我已经尝试过（JSFiddle）：但不起作用，如何设置默认值？

html date html-input

回答 14 投票 0

如何禁用 HTML 输入中选择日期的任何一天？

我在 React 中有一个页面，我使用浏览器输入。如何阻止我在相关输入中指定的任何日历日？我在 React 中有一个页面，我使用浏览器输入。如何阻止我在相关输入中指定的任何日历日？ <input type="date" id="start" name="trip-start" value="2018-07-22"/> 我需要阻止用户在我指定的特殊日子做出选择。我知道calendar受到min-max等值的限制，但我想要的不是禁用日期范围内的日期。我想禁用并阻止直接从日历中的任何一天或一年选择日期。我认为你可以通过状态和事件处理程序来处理这种行为。 import React, { useState } from 'react'; const DateInput = () => { const [selectedDate, setSelectedDate] = useState(''); // Specify the list of disabled dates const disabledDates = ['2022-12-25', '2023-01-01']; const handleDateChange = (event) => { const selectedValue = event.target.value; // Check if the selected date is not in the list of disabled dates if (!disabledDates.includes(selectedValue)) { setSelectedDate(selectedValue); } }; return ( <div> <label htmlFor="start">Select a date:</label> <input type="date" id="start" name="trip-start" value={selectedDate} onChange={handleDateChange} min="2022-01-01" max="2023-12-31" /> </div> ); }; export default DateInput;

javascript html reactjs html-input

回答 1 投票 0

HTML 范围有时会卡住

当我滑动 HTML 范围输入时，我的鼠标变成“不允许”光标，并且滑动停止。 .main__slider__input { 宽度：100%； } 当我滑动 HTML 范围输入时，我的鼠标变成“不允许”光标，并且滑动停止。 .main__slider__input { width: 100%; } <div class="main__slider">  <input id="slider-height" type="range" class="main__slider__input" />  <input id="slider-width" type="range" class="main__slider__input" />  <input id="slider-zoom" type="range" class="main__slider__input" /> </div> 起初，我以为鼠标在我添加到输入的 HTML 标签上拖动。然而，当我注释掉这些内容时，问题仍然存在。这是演示该问题的视频。我认为鼠标聚焦在输入周围的一些空白处，这导致它无法平滑滑动，我该如何纠正这个问题。据 Grumpy 报道，这是由于意外选择滑块后面的元素造成的。因此，可以通过禁用容器中的选择来解决此问题： .container{ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ }

html css google-chrome html-input

回答 1 投票 0

设置输入字段的默认值

如何在 JavaScript 中设置表单文本字段的默认值？

javascript html forms input html-input

回答 19 投票 0

当值被重新输入但未更改时，如何强制JS输入的“更改”事件？

我知道有很多类似的问题，但我还没有找到确切的情况。使用 vanilla JS 有一个输入控件，用户可以在其中键入内容。以日期为例（但也可以是电话号码...

javascript html forms validation html-input

回答 2 投票 0

html-input 相关问题

最新问题