javascript - Ifelse with button and input

EDIT - SOLVED // As user Win pointed out in the answers, if a function is named click and you try to call it with a HTML button, then it will confuse the function with an inbuilt/standard "click()" function for HTML buttons

Can anybody figure out, why (in the world) this isn't working? I get no bug reports in Chrome, my IDE and/or JSFiddle.

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="app.js"></script>
</head>
<body>
  <input id="search" type="text" name="input" placeholder="Search..">
  <button onclick="click()" value="Submit">Get weather</button>
</body>
</html>

JavaScript

function click() {
  if (document.getElementById("search").value == "New York") {
    console.log("Loading weather for New York..."); 
  } else {
    console.log("City name isn't valid. Try again");
  }
}

JSFiddle: /

Thanks in advance.

Can anybody figure out, why (in the world) this isn't working? I get no bug reports in Chrome, my IDE and/or JSFiddle.

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="app.js"></script>
</head>
<body>
  <input id="search" type="text" name="input" placeholder="Search..">
  <button onclick="click()" value="Submit">Get weather</button>
</body>
</html>

JavaScript

function click() {
  if (document.getElementById("search").value == "New York") {
    console.log("Loading weather for New York..."); 
  } else {
    console.log("City name isn't valid. Try again");
  }
}

JSFiddle: https://jsfiddle/nd6f5pp7/

Thanks in advance.

Share Improve this question edited Jul 30, 2017 at 14:46 asked Jul 30, 2017 at 14:36 thesystem 6142 gold badges12 silver badges36 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

Don't call the function click, it'll get confused with obj prototypes.

// Grab Input from DOM
var iptSearch = document.getElementById('search')

// Grab Submit button from DOM
var btnGetWeather = document.getElementById('get-weather');

// Add Event Listener
btnGetWeather.addEventListener('click', function() {
  if (iptSearch.value === "New York") {
    console.log("Loading weather for New York...");
  } else {
    console.log("City name isn't valid. Try again");
  }
});

<input id="search" placeholder="Search..."/>
<button id="get-weather">Get Weather</button>

Or, if you want to follow the example code you've given. Use the below:

function getWeather() {
  if (document.getElementById('search').value === "New York") {
    console.log("Loading weather for New York...");
  } else {
    console.log("City name isn't valid. Try again");
  }
}

<!DOCTYPE html>
<html>

<head>
  <script src="app.js"></script>
</head>

<body>
  <input id="search" type="text" name="input" placeholder="Search..">
  <button onclick="getWeather()">Get weather</button>
</body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Ifelse with button and input - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)