I want to change the value of an element with javascript.
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").val("very happy cow");
</script>
Use the text method instead:
$("#mixui_title").text("very happy cow");
Try html() function instead :
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").html("very happy cow");
</script>
2 Things:
1- Usualy, javascript is placed at the top of the page. If you do this in the future, you'll need to need to enclose it in the jQuery equivalent of document.ready:
$(function() {
// do stuff
});
This tells jQuery to run the function as soon as the document is ready.
2- For any value between two opening/closing tags, you need to use the jQuery method .html("enter text to change") while the .val() method is used to change the value of any control with the attribute value="" like inputs:
<input type="submit value="This will be changed with val()" />
The following should work fine. Note its wrapped in $(function() { }); and is using the .html() property and is placed at the top of the page.
<script type="text/javascript">
$(function(){
$("#mixui_title").html("very happy cow");
});
</script>
<span id="mixui_title">Angry cow sound?</span>
It's not enclosed by the
$(document).ready(function(){
//your code goes here
});
Related
I thought that JavaScript is simple, but seems that it doesn't work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function org(){
$(this).toggle()
}
</script>
<span onClick="org()" id="kaka">Click me and i hide</span>
Anyone knows what's wrong?
this in your code is not referencing your <span> element. You need to pass a reference to your element.
<script>
function org(e){
$(e).toggle()
}
</script>
<span onClick="org(this)" id="kaka">Click me and i hide</span>
Alternatively (and this is really the preferred way) you can attach an event handler and avoid using an inline handler:
<script>
$("kaka").on("click", function() {
$(this).toggle()
});
</script>
<span id="kaka">Click me and i hide</span>
You don't need to pass a reference to the element. You can also tell the function to use the element for this
<span onClick="org.call(this);" id="kaka">Click me and i hide</span>
Demo: JSFiddle
I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.
I am creating an instant messenger using jquery and am having trouble taking the message typed into the message field after clicking the "send" button
I have the html
<body>
<div class="main-window">
<div class="chat-screen"></div>
<div class="bottom-wrapper">
<input class="text-bar"></input>
<input type="button" value="Send"class="send-btn">Send</input>
</div>
</div>
<body>
and I have tried to append it using this jquery
$('.send-btn').click(function() {
$(".text-bar").text().appendTo(".chat-screen");
});
But it doesn't seem to work. Can someone please point me in the right direction?
JSFiddle
you need .val()
change
$(".text-bar").text()
to
$(".text-bar").val()
you code becomes
Fiddle DEMO
use .append()
$('.send-btn').click(function () {
$(".chat-screen").append($(".text-bar").val());
});
Clear Textbox and new chat in new line.
$(document).ready(function () {
var chat_screen = $(".chat-screen");
var text_bar = $(".text-bar")
$('.send-btn').click(function () {
chat_screen.append(text_bar.val() + '<br/>');
text_bar.val('');
});
});
Updated Fiddle DEMO
The .text() (and correct .val()) functions return strings, not jQuery objects, and therefore don't have the appendTo() function available on them. You'll need to do this instead:
$('.chat-screen').append($('.text-bar').val());
Also make sure that, if the script is in the <head> of your HTML page, or comes before the actual HTML of the elements, you wrap it in a DOM ready handler:
$(document).ready(function() {
$('.send-btn').click(function(){
$('.chat-screen').append($('.text-bar').val());
});
});
And, of course, check that jQuery is being loaded correctly (it wasn't in your jsFiddle at all).
Since this is going to (probably) be running a lot of times, you'd want to cache the selectors for the chat screen and the text input, like so:
$(document).ready(function() {
var $chatscreen = $('.chat-screen'),
$textbar = $('.text-bar');
$('.send-btn').click(function(){
$chatscreen.append($textbar.val());
$textbar.val('');
});
});
Updated jsFiddle
Here is you fiddle updates: jsfiddle
Use val() instead text()
$('.send-btn').click(function(){
//$(".text-bar").val().appendTo(".chat-screen");
$(".chat-screen").append($(".text-bar").val())
$(".chat-screen").append('<br />')
});
please see http://jsfiddle.net/K95P3/15/
Several issues:
Add space between value and class attributes in input
Change .text() to .val() - inputs don't have text nodes, just values
Use $('.chat-screen').append($(".text-bar").val());
Make sure you have jQuery included
See updated fiddle http://jsfiddle.net/K95P3/11/
Try this.
$('.send-btn').click(function(){
$('.chat-screen').append($(".text-bar").val());
});
Actually, you really should append an html tag, not just text. I mean, you could, but shouldn't.
What i would recommend is this:
Create a base container for a message like:
<div class="message-container" style="display:none;">
<span class="message"> </span>
</div>
You then clone this container, stuff it the value of the input in the chat and append it to the chat screen.
The code could be something like:
$('.send-btn').click(function(){
var container = $('.message-container:hidden').clone(true).show();
container.find('.message').text($(".text-bar").val());
container.appendTo($('.chat-screen'));
});
Append text and dropdown value sametime
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
//var x=$("#cars option:selected").text();
//var y=$("#bus").val();
//alert(''+x+' '+y+'');
$(".chat-screen2").append($("#cars").val()+'<br/>');
$(".chat-screen").append($("#bus").val()+'<br/>');
$("#bus").val('');
});
});
</script>
</head>
<body>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input id="bus" type="text">
<button type="submit">submit</button>
<br><br>
<div class="chat-screen2" style="float:left;"></div>
<div class="chat-screen" style="float:left;margin-left:10px;"></div>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script>
var printLinks = function () {
var links = $(.info).code;
document.write(links);
};
</script>
<form>
<input type="button" value="printlinks" onclick="printLinks()"></input>
</input>
</form>
I am trying to write to a document all of the text in a certain element type that is a child of an element I query by class $(.info). I know document.write is not the best method for writing to a document. info is the class of the parent element of the <code> tags that contain the links I want to print. I am very new to jQuery so I am probably misusing it. Any help would be appreciated.
Okay, if I understand correctly, you want to grab the content in the element with the class info. If that is correct you want to take the following approach:
<script type="text/javascript">
function printLinks() {
var content = $('.info').html(); // Grab innerHTML of element
$('#idOfTargetElement').html( content ); // write the content here
}
</script>
EDIT:
See this fiddle for clarification:
http://jsfiddle.net/XD5qj/
You can use the html() function of jQuery.
For example:
<script>
$(function(){
var links = $('.info code').html();
$('.output').html(links);
});
</script>
<div class="info"><code>Example code</code></div>
<div class="output"></div>
If you have multiple "< code>" tags, you want to use the handy "each()" function of jQuery:
$('.info code').each(function(){
$('.output').append($(this).html());
});
I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately
<html>
<head>
<script src="jquery-1.6.js"></script>
<script type="text/javascript">
function getUniqueButtonValue(value)
{
alert(value);
$("value").hide();
}
</script>
</head>
<body>
<button id=someUinqueId value=something>Clear Selection</button>
</body>
</html>
Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.
$(document).ready(function(){
$("button").click(function(){
var me = $(this);
// do whatever with me
alert(me.val());
me.hide();
});
});
There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.
Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.
I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.
As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:
$(document).ready(function() {
$("button").click(function() {
alert(this.value);
$("#" + this.value).hide();
});
});
Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.
You can do this:
<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>
try this
$("#123").click(function(){
getUniqueButtonValue($(this).val());
});
I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:
$("#a123").click(function(){
getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
alert(value);
$("#"+value).hide();
}
</script>
</head>
<body>
<button id=123 value=uniqueId545>Clear Selection</button>
</html>
You can save yourself a lot of work by trying:
<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />
With the following JavaScript:
$('.clearbutton').click(function(e) {
$($(this).val()).val('');
});