如何正确显示表单 HTML 输入
[英]How do I properly display form HTML input
问题描述
我的代码没有按我的预期工作，我不知道如何修复它。 所以，每当人们在框中输入“你好”，然后按下提交，段落帽子说 hi 应该显示“好工作”，但事实并非如此。
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <textarea id="thesearchh" style="resize: none;"></textarea> <button onclick="submitSearch()">Submit</button> <p id="searchResult">hi</p> <script> function submitSearch() { if(document.getElementById('thesearchh').includes('hello') == true) { document.getElementById('searchResult').innerHTML = 'good job'; } } </script> </body> </html>
3 个解决方案
解决方案1
0 2022-06-09 17:50:25
您应该使用document.getElementById(inputId).value检查输入值，而不是使用includes方法。 include 方法适用于数组和字符串，但不适用于 DOM 元素。
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <textarea id="thesearchh" style="resize: none;"></textarea> <button onclick="submitSearch()">Submit</button> <p id="searchResult">hi</p> <script> function submitSearch() { if(document.getElementById('thesearchh').value === "hello") { document.getElementById('searchResult').innerHTML = 'good job'; } } </script> </body> </html>
解决方案2
0 2022-06-09 18:06:02
- 停止使用内联属性，例如：CSS
style和 JSon*处理程序。 CSS 和 JS 应该在各自的标签或文件中。 - 使用Element.addEventListener()而不是 onclick 属性处理程序
- 使用InputElement.value获取 :input 的（在您的情况下为
<textarea>）值。 - 使用
===将其与所需的"hello"字符串进行比较 - PS：你确定你需要一个
<textarea>而不是<input type="text">吗？ - 此外，您可能希望在比较之前使用 String.prototype.trim() 从用户输入字符串中删除空格。 这取决于你。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #search { resize: none; } </style> </head> <body> <textarea id="thesearchh"></textarea> <button type="button" id="thesubmitt">Submit</button> <p id="searchResult">hi</p> <script> // DOM Utility functions: const el = (sel, par) => (par??document).querySelector(sel); // Task: Match value "hello": const elSearch = el("#thesearchh"); const elSubmit = el("#thesubmitt"); const elResult = el("#searchResult"); const submitSearch = () => { const userInput = elSearch.value; if (userInput === "hello") { elResult.textContent = 'good job'; } }; elSubmit.addEventListener("click", submitSearch); </script> </body> </html>
解决方案3
0 2022-06-09 18:51:32
刚刚在您的代码中添加了.value
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <textarea id="thesearchh" style="resize: none;"></textarea> <button onclick="submitSearch()">Submit</button> <p id="searchResult">hi</p> <script> function submitSearch() { if(document.getElementById('thesearchh').value.includes('hello') == true) { document.getElementById('searchResult').innerHTML = 'good job'; } } </script> </body> </html>
在这里您可以看到 iam added .value 行
if(document.getElementById('thesearchh').value.includes('hello') == true){}
这是表单的代码，涉及输入验证。 如何让JS代码正常运行？
[英]This is code for a form, which involves input validation. How do I make the JS code function properly?
如何正确地将 HTML 输入字段中的文本链接到 JavaScript
[英]How do I properly link text from an input field in HTML to JavaScript
我可以在 html 表单输入字段中显示我的文本文件数据吗？ 如果是，请告诉我怎么做？
[英]can i display my text file data in html form input field? if yes, please tell me how?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.