How Do I Get Image Src Attribute? [closed] - javascript

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

Related

JavaScript Onclick Function Fails to Execute [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
I have a button that triggers an onclick function:
<!DOCTYPE html>
<body>
<h2>what can javascript do?</h2>
<p Id="demo"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello Javascript!"'>Click Me!</button>
</script>
</body>
</html>
when clicking the button, I found that the onclick does not trigger. What might be the problem with my code?
You don't need jQuery
Use addEventListener instead and set an ID to your button Element
use textContent (instead of innerHTML)
Add the missing <html> tags etc
Use type="button" on a Button Element (since by default is of type "submit")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<h2>what can javascript do?</h2>
<button type="button" id="demoButton">Click Me!</button>
<p id="demo"></p>
<script>
const elDemo = document.querySelector("#demo");
const elButton = document.querySelector("#demoButton");
elButton.addEventListener("click", () => {
elDemo.textContent = "Hello Javascript!"
});
</script>
</body>
</html>

Trying to create a connect metamask feature [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
I cannot for the life of me figure out what I am doing wrong.
I am following the metamask docs and everything: https://docs.metamask.io/guide/create-dapp.html#basic-action-part-1
.html button:
<!DOCTYPE hmtl>
<html lang="en">
<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>
<link rel="stylesheet" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdlivr.net/npm/web3#latest/dist/web3.min.js"></script>
<script src="./javafilename.js"></script>
</head>
<body>
<button class="btn btn-primary btn-lg btn-block mb-3" id="connectButton" value="Connect" enabled></button>
<body>
</html>
metamask java:
const initialize = () => {
//Basic Actions Section
const onboardButton = document.getElementById('connectButton');
};
I don't see an error in your code, it just that you need to keep following the instructions, by giving the current code i can see its working, take a look at this Codesandbox
https://codesandbox.io/s/kind-frost-f4zgd7?file=/index.html
If you notice, when you click the button, it tell us Metamask is installed
Few points.
On the documentation, they load this when the window load window.addEventListener('DOMContentLoaded', initialize); and you want to do it on a button, see onclick="initialize()"
Also please make sure for other questions to provide an error or something so the community can help you better

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 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 can i make this code better?because it doesn't work now [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have written this simple code in visual studio but it doesn't work.
please help me :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
</head>
<body>
<img src="NewFolder/001.jpg" width="100" height="500" alt="" border="0" onclick="showpicture1();" />
<script>
function showpicture1() {
imgMain.src = "NewFolder/001.jpg";
imgMain.width = 400;
imgMain.height = 300;
}
</script>
</body>
</html>
First of all your script tag is in the wrong place.
You should include it or inside your tags or after your like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<script>
function showpicture1() {
var imgMain = document.getElementById('main');
imgMain.src = "NewFolder/001.jpg";
imgMain.width = 400;
imgMain.height = 300;
}
</script>
</head>
<body>
<img id="main" src="NewFolder/001.jpg" width="100" height="500" alt="" border="0"
onclick="showpicture1();" />
</body>
</html>
Preferrably, I would rather put it inside the head tag for being able to do DOM manipulations and therefore validating it. I would also declare the variable as var imgMain and getting it through assigning an id to the img. I hope that helps.

Categories