When you press button it calls randomQuote() function using onClick method in html. It works fine , changes the background color and the text of quotes[rand] also works. But there is no change in by id element. Also, it is not a array problem because if i type the same by statement outside the randomQuote(), it works fine.
Here is the code:
function randomQuote(){
var rand =Math.floor(Math.random()*(quotes.length));
$("#qu").html(quotes[rand]);
$("#by").html(by[rand]);
$("body").animate({backgroundColor: colorr[rand]}, 1000);
};
(Go to https://codepen.io/TheCoder21/pen/XVVxvo) for full code
The issue in your markup:
<div class="quote">
<blockquote id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p id="by">
random text
</p>
</blockquote>
</div>
container with id="by" overwrites by this jquery method $("#qu").html(quotes[rand]);
If you want to prevent this behaviour just wrap your text in new paragraph with id="qu":
<blockquote>
<p id="by">
Here are some of my favourite quotes.Hope you enjoy them!
</p>
<p id="by">
random text
</p>
</blockquote>
The problem is that your by element belongs inside blockguote i.e id=qu element when you did $("#qu").html(quotes[rand]);
It's html structure got changes. you no longer have a by element.
Therefore, when you try to $("#by").html(by[rand]); nothing happens. Because no by element was found.
Solution: move your by element outside the blockquote
Working code: https://codepen.io/anon/pen/MrLodd
You have to separate the id in two paragraphs inside the blockquote. You can't give the blockquote and id and then expect the paragraph tag to also pick up an id inside of it. The blockquote overrides it.
<blockquote>
<p id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p>
<p id="by">
random text
</p>
</blockquote>
Related
I am completely new to coding in general. I've started with the very basics of HTML, CSS and JavaScript.
I have two paragraphs:
<p id="title1">Change this</p>
<p id="title1"> Change this too! </p>
While the first one gets automatically changed by:
<script type="text/JavaScript">
$('#title1').html('Changed!');
</script>
the second one doesn't. But shouldn't it? Since all #title1 are being changed?
I have the same problem for the onclick version. The first paragraph gets changed when clicking on it, the second doesn't.
<p id="title3" onclick="sayGoodbye();">Toggle this Hello - Goodbye</p>
<p id="title3" onclick="sayGoodbye();">Thing to click on</p>
<script type="text/javascript">
function sayGoodbye(){
$("#title3").html('Goodbye');
$("#title3").click(function(){
$("#title3").html("Hello again!");
$("#title3").off("click");
});
}
</script>
When you select an element by its id, only the first one gets selected because you're only supposed to use one id on one element! Each id should only ever be used once on a page!
If you need to get a bunch of elements together 'by' something, do it 'by class'.
$(".title1").html("Changed!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="title1">Change this</p>
<p class="title1"> Change this too! </p>
ID attribute has to be unique for each HTML tag. You can use class attribute to act on multiple tags.
The id attribute should be unique at least in the same level child tree.
Use class instead and listen to .click() with $(this) to get
current clicked element.
If you want to call a function using onclick attribute pass clicked element to it using this like onclick="sayGoodbye(this);".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="title3" onclick="sayGoodbye(this);">Toggle this Hello - Goodbye</p>
<p class="title3" onclick="sayGoodbye(this);">Thing to click on</p>
<script type="text/javascript">
function sayGoodbye(t){
$(t).html('Goodbye');
$(t).click(function(){
$(this).html("Hello again!");
$(this).off("click");
});
}
</script>
<div>
some text
<img />
<br>
text I want to select
<br>
<img />
some text
</div>
The HTML is like above, I want to select the text between the two images, is there anyway to do this?
Some background: I am trying to format some poorly written HTML so it can be further stylized. There are too many pages of them to hardcode it one by one, they have some certain pattern though, so I am trying to write a javascript function to make the whole procedure easier. The text between <br> is actually the description of the first image, I want to wrap it with <div> so I can add class to it and stylize it. But first I need to select it, right?
Simplest solution using core jQuery functions:
$('img').nextUntil('img').doSomething();
Jonathan Snook pointed me to the jQuery 1.4 function that solves this:
nextUntil()
Check out it's sibling functions:
prevUntil
parentsUntil
Inspired by:
nextAll
prevAll
For other reference check this one :How to select all content between two tags in jQuery
<div>
some text
<img />
<br>
<span>text I want to select <span>
<br>
<img />
some text
</div>
add tag for this and get "div span" . If have more span in "div" . add id or class for them.
I have a small problem that i cannot solve.I have this : <p>Text<span></span></p> and i want to change only the text of the <p>.Which means, when i click on an change-Button, the text based on an input field should replace the text.
What i have tried is something like this : $("p").text("newText") but this will also remove the <span>.
So how can i only change the text and not the inner html...
With your HTML above you can do
$('p').contents().first()[0].textContent='newText';
The idea is to take advantage of the fact that contents() includes text-nodes. Then, access by index [0] to get the native javascript DOM element and set the textContent
$('p').contents().first()[0].textContent = 'newText';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>Text<span>inside span</span>
</p>
Put another span inside of the p tag and only change its contents:
<p>
<span id="theText">Text</span>
<span></span>
</p>
And then:
$('#theText').text('newText');
$('#theText').text('newText')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="theText"></span>
<span>some other span</span>
</p>
I tried to wrap the following element with div container, if it is not wrap up with.
<p class="fileDetails"><div class="filename">text goes here</div><div class="fileSize">text goes here</div></p>
How to fix this?
You can't put <div> elements inside of <p>s. (Down to the specs -- see also Putting <div> inside <p> is adding an extra <p> ) if you're interested.
So you'll have to switch to a <span> that's styled the way you want, or probably semantically an unordered list makes more sense.
Here's a fiddle showing how it could work.
Working Example: http://jsfiddle.net/ef43tgto/
You should make .filename and .fileSize <p> tags and the .fileDetails a <div>. Then you can use jQuery .wrap()
<div class="fileDetails">
<p class="filename">text goes here</p>
<p class="fileSize">text goes here</p>
</div>
if ( !$('.container').length ) {
$('.fileDetails').wrap('<div class="container" />')
}
A simple example is confusing me about selector in jQuery.
I have this html code:
<div class="container">
<h1>Welcome to my Website </h1>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
if I want to highlight the second paragrah I think that this is the right way:
$('p:nth-child(2)').css("background-color","yellow");
But this is not correct, in fact the First paragraph will be highlighted, even if I have only two <p> section and I'm putting the value 2 inside the nth-child() function.
Here the related jsfiddle
If I remove the <h1> element, the second paragraph will be highlighted. So, it seems as if the <h1> element is treated as <p> element by jQuery selector.
However the code:
$('p:nth-child(1)').css("background-color","yellow");
will not highlight anything. Why this happens?
nth-child means literally "child in place n", what you're searching is nth-of-type , have a look: http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
So this will work as you expect:
$('p:nth-of-type(2)').css("background-color","yellow");
JSFiddle: http://jsfiddle.net/t2rn7/
:nth-child is with respect to the parent, so in your first example that <p> is in fact the 2nd child. If you want it to be the second p, you should use :nth-of-type