jsfiddle: https://jsfiddle.net/7n6pysLr/
I'm trying to change the value of the #test p from Hello to Bye. It doesn't work:
<html>
<head>
</head>
<body>
<div id="test"><p>Hello</p></div>
</body>
</html>
$("#test p").val("Bye");
What am I doing wrong?
You need to change the html in this case with .html()
$("#test p").html("Bye");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="test">
<p>Hello</p>
</div>
</body>
</html>
val() method is used for <input>.
In your case you are using <p></p> so here you have to use .html() or .text(), both will work. These methods are used to update the innerText/innerHtml.
html() : returns the content (innerHTML) of the selected elements.
text() : method sets or returns the text content of the selected elements.
Related
CAN ANYONE PLEASE HELP ME FIND OUT WHY THE ONCLICK ISNT WORKING... I also have a CSS sheet connecting my span classes but for some reason onclick isnt working...
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>
If you use document.getElementById, you need specify the "id":
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
Example by: http://www.w3schools.com/jsref/event_onclick.asp
There is no id specified on your element .
<p class="textAlignLeft" id="latestDiscountCode" onclick = "showCode();">
....
</p>
The id can be placed on whatever element you want to change the classname of. Code above is assuming this is the "p" tag.
Hope this helps.
I suspect you have a typo in either your id name or your stylesheet class names. The code you supplied does not include an element with an of "latestDiscountCode" so I have created one as an example. If you click on the CLICK ME text you will see your browers DOM inspector that the correct classes are added to the div.
<html>
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<body>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>
<p id="latestDiscountCode">
foo
</p>
</body>
</html>
I don't think you need that semi-colon ;
<p class="textAlignLeft" onclick = "showCode()">
Move the <script> to the end of the body. Otherwise, it'll execute before the DOM's been loaded. Credits to #Federico.
Alternatively, listen for DOMContentLoaded.
In w3schools Javascript tutorial it states:
The value of the text node can be accessed by the node's innerHTML property, or the nodeValue.
Then I change the following code:
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
to
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].innerHTML;
document.write(txt);
</script>
</body>
</html>
But it didn't work, could anyone please let me know did I miss something here? Thanks.
document.getElementById("intro").childNodes[0] is a text node, but only element nodes have innerHTML.
You can use document.getElementById("intro").innerHTML instead (to get the innerHTML of the paragraph instead of of the text inside the paragraph).
Try
txt=document.getElementById("intro").innerHTML;
document.write(txt);
You can access innerHTML directly from the p element:
txt=document.getElementById("intro").innerHTML;
document.write(txt);
Also, try to find an alternative to W3Schools: http://www.w3fools.com/
Change
txt=document.getElementById("intro").childNodes[0].innerHTML;
To
txt=document.getElementById("intro").innerHTML;
http://jsfiddle.net/THMVC/
use only
txt=document.getElementById("intro").innerHTML;
Let's say we have this markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>project.js</title>
<script src="project.js"></script>
<script>
</script>
</head>
<body>
<h1>some project — javascript & html tests</h1>
<hr />
<p>
testing 123
</p>
</body>
</html>
I know that there are .prependChild(), .appendChild(), .innerHTML, etc, properties and methods, but what I am looking for is how to add (append) contents after the </body> tag closure?
I need this, without using jQuery — is it possible?
If you use 'id'.you can use these property:
document.getElementById('id').nextSibling;
document.getElementById('id').previousSibling;
It won't work in some browser because content after body is not "legal". Anyway, this would be:
document.body.parentNode.appendChild(document.createTextNode('text after body'));
document.body.parentNode.appendChild(document.createComment('comment after body'));
http://jsfiddle.net/yVKk6/ and inspect the Result frame.
It may sound trivial but I am unable to do it.
Here is the simple code : what's wrong I am doing here ?
Is it like I have misunderstood the function? If yes, please correct me.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
jQuery('#id').append('<select></select>');
});
});
</script>
</head>
<body >
<input type="submit" class="button" id="id" value="submit"/>
</body>
considering your own code you can simply write
$('#id').after('<select></select>');
generally append works with a container since #id is associated with a button so it will not work. use div/span if you still want to use append, but if you don't want to .after() works fine.
you have no container/element in your body that will hold the newly added select, add a container in your html like this with id="id"
<body >
<div id="id">
</div>
<input type="submit" class="button" value="submit"/>
</body>
DEMO
Does #id exists in the document?
Do you want to add <option> to <select> ?
$(document).ready(function() {
$(".button").click(function() {
jQuery('body').append('<select><option value="1">One</option><option value="2">Two</option></select>');
});
});
Fiddle - http://jsfiddle.net/XVmuZ/
If you want to add it to #id then make sure it exists (like in rahul's answer)
Fiddle - http://jsfiddle.net/XVmuZ/1/
fisrt thing don't use submit button because it will postback your page so jquery will not work.
try this code
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
$('#ddl').append('<select><option>abc</option><option>def</option></select>');
});
});
</script>
</head>
<body >
<input type="button" class="button" id="id" value="submit"/>
<div id="ddl">
</div>
</body>
I want to create an external js-file, in which I can configure the copy of several elements in my html file. I'm using document.getElementById("id").innerHTML = "what ever"; to "inject" or "add" my copy to html elements that have a certain id.
This works out fine, however when I have more than one element with the same id in my html file, the html from my js-file is only added to the first element but the html from my js-file should be added to all elements with the same id
That's my html construct:
<html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<strong id="back-button"></strong>
</div>
....
<div>
<strong id="back-button"></strong>
</div>
</body>
</html>
And that's my JS file:
$(function() {
$(document).ready(function addcopy() {
/* global */
document.getElementById("back-button").innerHTML = "go back";
});
});
Any help or tip is much appreciated.
Thanks!
You could use class, because ids can be used only once.
<html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="back-button">
</div>
....
<div class="back-button">
</div>
</body>
</html>
And in javascript :
<script type="text/javascript">
$(document).ready(function addcopy() {
/* global */
$(".back-button").html("<strong>go back</strong>");
});
</script>
In js you can do it like this:
document.getElementsByClassName('message')[0].innerHTML = "Good afternoon:)!";
Then you can loop through all elements of this class.
id attribute should be unique, I know that in JQuery if you want to use multiple selector you can use class instead.
Or you can use name and the getElementsByName() function that will give you an array of elements in Javascript.
You have jQuery, why not use $('#back-button').html('go back') instead of the plain/native JS?
However, you have more than one button and IDs must be unique, so you cannot use an id for this. Use class="back-button" and the following jQuery code:
$('.back-button').html('go back');
Please use class instead of id for the HTML elements and use jquery to fill in the required text.
<div>
<strong class="back-button"></strong>
</div>
$('.back-button').text('go back'); // OR
$('.back-button').html('go back');