Function not recognized by Javascript [duplicate] - javascript

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

Related

Why can't I modify a <form>'s parent in onsubmit events? [duplicate]

This question already has answers here:
Is it possible to append to innerHTML without destroying descendants' event listeners?
(13 answers)
Closed 1 year ago.
This isn't so much a problem, since I know the solution, as it is a desire to understand what the problem actually is. Take this minimal example:
document.getElementById("testForm").addEventListener('submit', (event) => {
event.preventDefault();
document.getElementById("main").innerHTML += '<p>submitted</p>';
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<main id="main" class="main">
<form id="testForm">
<input type="submit" name="submit">
</form>
</main>
</body>
</html>
This is supposed to append "<p>submitted</p>" to #main on submission. On the first click, it works as expected. On the second click, the browser seems to lose my event listener and fall back to the default behavior. It reloads the page with a query.
By slightly modifying the code to add a sibling container and appending to that, we can get this to work as expected.
document.getElementById("testForm").addEventListener('submit', (event) => {
event.preventDefault();
document.getElementById("response").innerHTML += '<p>submitted</p>';
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<main id="main" class="main">
<form id="testForm">
<input type="submit" name="submit">
</form>
<div id="response"></div>
</main>
</body>
</html>
So I know the solution, but I don't understand the problem.
When you modify the innerHTML of an element, you are removing all event listeners on its children.
This is because the entire tag must be reparsed, losing event listeners in the process.

Why isn't my evaluate function being called on click? [duplicate]

This question already has answers here:
JS function named `animate` doesn't work in Chrome, but works in IE
(3 answers)
Closed 1 year ago.
I am new to JS so please bear with me :)
below is the code but on clicking it does not trigger the function
<!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>Document</title>
</head>
<body>
<button type="submit" onclick="evaluate()">Submit</button>
</body>
<script type="text/javascript">
function evaluate(){
document.write("Working");
};
</script>
</html>
evaluate() is a reserved function in JavaScript. Name your function something else.
The fact that the console error mentioned the need for two arguments was a clue that the function was defined somewhere already, and that your definition wasn't being considered.
<!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>Document</title>
</head>
<body>
<button type="submit" onclick="notEvaluate()">Submit</button>
</body>
<script type="text/javascript">
function notEvaluate() {
document.write("Working");
};
</script>
</html>
Regarding document.write, see Why is document.write considered a "bad practice"?.
Try using a function name different than "evaluate" - evaluate is a reserved function name

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

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>

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');

Make Javascript calculate HTML input from user

I want to make a website that can calculate the numbers that the user enters in the text field. Below, I am trying to store the users input in a variable and then return it to the console, but this does not seem to work. It is supposed to take in more calculations down the line, but I thought I would keep it simple at first.
What have i forgotten?
PS: I'm currently still learning JavaScript, so don't roast me too hard :)
Thanks!
Best
Mikkel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/JavaScript/culjo.js" defer></script>
<title>Culjo</title>
</head>
<body>
<h1>Culjo</h1>
<input id="inputOne" type="text">
<input id="inputtwo" type="text">
<input id="result" type="number">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-
QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Javascript
function calculate() {
var inputOne = document.getElementById("inputOne")
var inputTwo = document.getElementById("inputTwo")
result = inputOne+inputTwo + inputTwo
return result
}
calculate()
You need to get the value of the field like this:
var inputOne = document.getElementById("inputOne").value;
and then use
parseInt() or parseFloat() as stated at the comments to parse the string.

Categories