How do I write text in html and submit with onclick [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 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>

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>

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.

Javascript buttons and alerts not functioning properly. Alerts appear when page is refreshed but my buttons are not appearing

I am currently working on the beginning stages of js and trying to create buttons and alerts with it. when i write my code, the alerts work but my buttons are not appearing. when i inspect my webpage, the buttons dont even appear in the code. any suggestions on what i can do to fix this?
alertmessage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<script type="text/javascript" src="js/code.js">
</script>
</body>
</html>
code.js
window.alert("Welcome to Javascript");
buttons.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button 2">Click me.</button>
<script>
document.getElementbyId("button 2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>
</html>
well at first try not to use spaces when you create your buttons ids e.g (id="button 2")
instead use id="button2"
I modified your code adding the event listener on document ready find the below code hope that is what you are looking for, it should get your started.
Note: for posting here when you write your message paste your code under your message text and select the code then Press ctrl+K that should identify your code area then post it and all should work fine...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button2">Click me.</button>
<script>
$(document).ready(()=>{
document.getElementById("button2").addEventListener("click", function(){
alert("You have just clicked me!");
});
})
</script>
</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