How to log HTML input field data to the console? [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Here's what I have so far:
document.querySelector('.check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC" </head>
<body>
<main>
<h3>Enter your height in metres.</h3>
<input type="number" class="height" />
<h3>Enter your weight in kilograms.</h3>
<input type="number" class="weight" />
<div>
<button class="btn class">Calculate my BMI!</button>
<p id="bmi"></p>
</div>
</main>
</body>
</html>
Nothing happens in the console when I enter a height and click the button. Basically, I'm aiming to build a metric BMI calculator. As a first step, I'm trying to log to the console the value that the user inputs for "height". I don't really understand why this doesn't work, and I think I'm missing something. Could someone please help?

Your code throws an error on the console on the line:
document.querySelector('.check').addEventListener('click', function() {
because the querySelector('.check') call can't find any elements with class check and so returns null. To fix this you could add a check class to your button:
document.querySelector('.check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC" </head>
<body>
<main>
<h3>Enter your height in metres.</h3>
<input type="number" class="height" />
<h3>Enter your weight in kilograms.</h3>
<input type="number" class="weight" />
<div>
<button class="check btn class">Calculate my BMI!</button>
<p id="bmi"></p>
</div>
</main>
</body>
</html>

You should be giving the same class in the button which you have used in code or it is always best to give id when we are handling events.
document.querySelector('#check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
//Replace you button code with below
<button id="check" class="btn class">Calculate my BMI!</button>
or
document.querySelector('.check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
//Replace you button code with below
<button id="check" class="btn class check">Calculate my BMI!</button>

Just a lil problem there mate.
document.querySelector('.check')
But, there is no element with the class check so the EventListener doesn't even get attached to the button. This will solve it.
<button class="btn class check">Calculate my BMI!</button>

Related

Function not recognized by Javascript [duplicate]

This question already has answers here:
Why can't I call a function named clear from an onclick attribute?
(3 answers)
Closed 11 months ago.
I've been messing around with Javascript recently and I'm still a beginner. I've been trying to build a simple program which finds a specified string inside the text entered into the text field using regular expressions, but for some reason when I click the "Find" button it gives me the following error:
Uncaught TypeError: find is not a function
onclick http://192.168.178.20:62126/JavaScript/Findy/index.html:1
index.html:1:1
Here's my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Findy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
<form action="">
<input type="text" id="toFind" placeholder="What do you wanna find?">
<input type="button" id="find" onclick="find()" value="Find"></input>
<textarea name="textToSearch" id="textToSearch" cols="30" rows="10" placeholder="Enter your text"></textarea>
</form>
</body>
</html>
function find() {
var text=document.getElementById("textToSearch").value;
var word=document.getElementById(toFind).value;
var myRegex=/word/;
console.log(text.match(myRegex));
}
You need to add a <script> tag below where the find() function is called.
Second solution is to add async attribute to <script> tag

how to control tab key between buttons in react, javascript?

I have 3 buttons Cancel, Back, Continue respectively. when press tab key that should be going to Continue, Cancel, Back buttons. How can we do that in React, Javascript?
Please refer https://codesandbox.io/s/crazy-ishizaka-cnr5k?file=/src/App.js
export default function App() {
return (
<div className="App">
<button tabIndex="2">submit 1</button>
<button tabIndex="3">submit 2</button>
<button tabIndex="1">submit 3</button>
</div>
);
}
this above code is'nt working as I expected. Please suggest efficient solution for this.
The first thing about the tabIndex is it would act weird for use if you want to jump directly to the buttons and inputs.
After some researches about your problem, I have found out you have to do two things:
The first one is you have to add all:initial to the root in your project style. for example in your case that the project is React, you have to add this to the index.html and change that like this:
<!DOCTYPE html>
<html lang="en" style="all: initial;">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
I have changed the HTML tag and added the style in the second line
the second thing that you have to d is that you need to consider a side for the buttons that the index can go through it at first and then it can follow your order.
in my case, I have added this: (and know that the first tab would do nothing)
export default function App() {
return (
<div className="App" tabIndex={1}>
<button tabIndex={3}>submit 1</button>
<button tabIndex={4}>submit 2</button>
<button tabIndex={2}>submit 3</button>
</div>
);
I have forked your codesandbox and you can access it with this link:
https://codesandbox.io/s/dawn-hill-1br66?file=/src/App.js

How Do I Get Image Src Attribute? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I found a lot of questions like this but none of them are helpful
The problem is when I try console.log(document.getElementById("image").getAttribute("src"))
it just return null
how do actually get image src attribute?
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Endless Discuss</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="dark-theme">
<button class="theme" onclick="change_theme()"><img src="theme/Dark.png" class="logo" id="image"></button>
<textarea class="input-post" id="comment-content" placeholder="Type message here..." onkeypress="enter(event)"></textarea><br>
<button class="submit" id="submit_button" onclick="post_comment()">Send</button>
<script src="script.js"></script>
</body>
</html>
Just use src attribute of getElementById() method result.
console.log(document.getElementById("image").src);
Just put this in your JS code
var youtubeimgsrc = document.getElementById("ImageTagId").src;
I have coded up a simple get image source sample code. You may have a look at it
function myFunction() {
document.getElementById("label").innerHTML = document.getElementById("myImg").src;;
}
<img id="myImg" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg" width="107" height="98">
<button onclick="myFunction()">Click me to get image source</button>
<p id="label"></p>
use Jquery: $("#image").attr('src');

on click of folders should be inserted into the text box using node.js and jQuery

I'm trying to create a file browser app.Here on click of a folder should be inserted into the text box provided.
Suppose if I click on app folder,I want the /app folder to be inserted into the provided text box.I've followed this URL in order to make this file browser app.
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
Can anyone please suggest me regarding this issue ...
Since you're using jquery already I would say the easiest would set the jquery event click for the folders to select the text input element and use the .val () function to set your new value so it would look something like this
$(".folder selector").click (function (){
$(".textbox selector").val ("/"+this.text());
});
I'm not sure if the value function works on input elements but if not you could change it to a <textarea></textarea>

Why doesn't the text inside my text field disappear on click?

In the following example
http://twitter.github.com/bootstrap/base-css.html#forms
There is a text field with text "Type something..." which disappears upon click
I have included my nearly identical code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet">
</head>
<body>
<input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span>the
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
</body>
</html>
Can somebody tell me why my text does not disappear upon clicking?
I am using Chrome and the text does not disappear upon clicking. It disappears after writing into it. When you delete the input, the placeholder appears again.

Categories