代码之家 › 专栏 › 技术社区 › Omar Jandali

使用javascript获取HTML输入值时遇到问题

html javascript

Omar Jandali · 技术社区 · 6 年前

我有一个HTML文件,我想用javascript获取输入字段中输入的文本。我试过几种不同的方法,但似乎没有什么能正常工作。这是我现在拥有的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <input type="text" id="searchingterm">
    <form>
        <input type="text" id="search">
    </form>
    <script>
        $(document).ready(function(){
            var searched = document.getElementById("search").value;
            console.log(searched)
        })
    </script>
</body>
</html>

我也尝试过使用jquery,但它也没有做任何事情。

1 回复 | 直到 6 年前

Prince Hernandez 6 年前

基本上,问题是您没有为该输入分配任何内容,也没有函数来触发 search .

你的代码是对的,你只需要稍微修改一下。

function search() {
  var searched = document.getElementById("search").value;
  console.log(searched)
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>

<body>
  <form>
    <input type="text" id="search">
  </form>
  <button onclick="search()"> search</button>
</body>

</html>

这里有剧本 body

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>

<body>
  <form>
    <input type="text" id="search">
  </form>
  <button onclick="search()"> search</button>
  <script>
    function search() {
      var searched = document.getElementById("search").value;
      console.log(searched)
    }
  </script>
</body>

</html>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前