Trying to create a connect metamask feature [closed] - javascript

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

Related

How to use localstorage data in the body of an HTML 5 website [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 days ago.
Improve this question
How do I call the localStorage variables into the body of the website? Each variable will go under the matching tag. The code I am working on is below.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript"></script>
</head>
<body>
<h2>Homemade Beer</h2>
The production time is:
<h2>Homemade Cider</h2>
<h2>Moonshine</h2>
<h2>Homemade Wine</h2>
<script>
localStorage.setItem("MoonShineProductionTime", "4");
localStorage.setItem("AppleCiderProductionTime", "5");
localStorage.setItem("HomemadeBeerProductionTime", "4");
localStorage.setItem("HomemadeWineProductionTime", "7");
</script>
'
I tried:
Homemade Beer
The production time is: JSON.parse(window.localStorage.getItem('HomemadeBeerProductionTime'));
The lined was shown on the web browser with no stored value.

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>

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

Is there a CSS rule that causes clicked links change properties on destination site? [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 2 years ago.
Improve this question
Beginner question. Lets say I have 4 different links pointing to the same webpage, is it possible to change the destination page's properties based on which link got me there? Example: I click link1 and the background on the destination is yellow. link2 causes it to be black.
So my question would be do I need to create 4 different copies of the website for the 4 different links? Or is there a CSS rule or something else that would achieve the same thing, without creating 4 copies?
It is possible to use the :target pseudo selector in css to change styles based on the #anchor of the URL. For example below, www.mysite.com/test.html#black
div#black:target {
background-color: black;
}
div#yellow:target {
background-color: yellow;
}
div.page {
min-height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="black">
<div id="yellow">
<div class="page">
<h1>Content</h1>
</div>
</div>
</div>
</body>
</html>

Categories