JavaScript Onclick Function Fails to Execute [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 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>

Related

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

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

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.

How do I write text in html and submit with onclick [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 8 years ago.
Improve this question
I'm having an issue here. I want to create a text box which I have done.
But I want an onclick function too work with it. For example, If I were to type something in the text field and then clicked the 'click' button, I would want the text to appear on the white space of the site. Here is the current code:
<html>
<head>
<title>The Worlds Story!</title>
</head>
<body>
<h1>The Worlds Story</h1>
<textarea name="message" rows="10" cols="30">
Tell Your Story!
</textarea>
<button onclick="myFunction()">Click me</button>
</body>
</html>
Please help. Thank you.
Without JQuery:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="inp"/>
<p id="par">This is a paragraph.</p>
<button id="btn1" onclick="document.getElementById('par').innerHTML = document.getElementById('inp').value;">Change text</button>
</body>
</html>
Here is an example in JSFIDDLE:
http://jsfiddle.net/weinerk/Ln73L2zp/
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append( $("#inp").val() );
});
});
</script>
</head>
<body>
<input id="inp"/>
<p>This is a paragraph.</p>
<button id="btn1">Append text</button>
</body>
</html>

select all text in JavaScript [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 8 years ago.
Improve this question
i need to select all text in my html code and surround them with <span> tag in JavaScript
convert this code:
<!DOCTYPE html>
<html>
<body>
<h1>Heading</h1>
<p>paragraph.</p>
</body>
</html>
to this:
<!DOCTYPE html>
<html>
<body>
<h1><span id="text">Heading</span></h1>
<p><span id="text">paragraph.</span></p>
</body>
</html>
how can i do this?
You can wrap your text with this fonction :
$(selector).wrapInner( "<span class=\"text\"></div>");
where selector target the tag you want
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e) {
$('html').prependTo('<script>');
});
</script>
</head>
<body>
hi
</body>
</html>

Categories