javascript change div html when click span - javascript

Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure

Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.

I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>

Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>​
Javascript:
​$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
})​​;​
This way, the click event will work once, as it is what you probably intended.

Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/

Related

Copy and paste text from a div to another [jQuery]

I am trying to do a thing that seems easy to me but I'm not very familiar with javascript language and I can't find any documentation to do what I want.
Let's say I have a code like this:
<div id="sourceA">Text</div>
<div id="sourceB">Another</div>
<div id="destination"></div>
Let's say I click on the "sourceA" div, the text contained in it should go in the "destination" div.
Unfortunately, I have no idea how to do it. Can you help me? And maybe also suggest me somewhere I can go and learn something more about this code?
Read more about JavaScript and jQuery events. What you need here is a .click() event on sourceA to handle your behaviour as follows:
$("#sourceA").click(function() {
$("#destination").html($(this).html());
});
HTML:
<div id="sourceA" class="source">Text</div>
<div id="sourceB" class="source">Another</div>
<div id="destination"></div>
JS:
$('.source').click(function(e) {
$('#destination').text($(e.currentTarget).text())
});
Take a look at this example
var copyContentToDestinationClickHandler = function(event) {
$('#destination').empty();
$('#destination').append($(event.target).text());
}
$('#sourceA').click(copyContentToDestinationClickHandler);
$('#sourceB').click(copyContentToDestinationClickHandler);
https://jsfiddle.net/7v5a6bsu/

Clicking a button on a webpage using JQuery or Javascript

I've been rummaging through the web to how to click buttons for a project I'm working on with Javascript+JQuery(Still not very good). Luckily I was able to find my answer and figured out how to click basic HTML buttons that looked like this(Cut off some of the code just to get the point across).
<div class="ui-block-a">
<input type="submit" value="Buy Now" data-theme="d">
</div>
But now I've come across a button like this.
<div id="BuyWithRobux">
<div data-expected-currency="1" data-asset-type="T-Shirt" class="btn-primary btn-medium PurchaseButton " data-se="item-buyforrobux" data-item-name="Donations" data-item-id="170938328" data-expected-price="2" data-product-id="20832770" data-expected-seller-id="180359" data-bc-requirement="0" data-seller-name="Clone3102">
Buy with R$
<span class="btn-text">Buy with R$</span>
</div>
</div>
Just based off of what I know I don't think I can use what I used to click the last button which was...
$("input[type='submit']").click();
So my question is how can I click this "button"? I've tried using my old code on it to no avail. I rather not use Selenium, or anything if at all possible. Could anyone help me out with this? If you need anymore information just say what and I'll do my best to provide it, fairly new to this so don't know what to include sadly.
Thank you in advance.
By "clicking this button" If you meant to trigger a click on div#BuyWithRobux , You can do so like
$("#BuyWithRobux").click();
or
$("#BuyWithRobux").trigger("click");
The syntax for triggering a click remains the same, all you've to do is to use the right selector to target the element on which you need to trigger the event.
You can learn more about jQuery selectors here

How to toggle css visibility with Javascript

I am trying to create a FAQ page much like the one here: https://www.harrys.com/help
I want to create the effect where clicking a question will display an answer.
My code can be seen here: http://jsfiddle.net/8UVAf/1/
Can anybody tell me why my javascript is not working? I realized I combined jQuery and Javascript, but I read somewhere that it should compile fine.
HTML:
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answer</p>
</div>
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answerdadawdawdawdawdawdawdawdwadawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawd</p>
</div>
JS:
$(".question").click(function (argument) {
if(document.getElementById("answer").className.match(/(?:^|\s)hideinit(?!\S)/)) {
document.getElementByID("answer").className = "display";
}
});
Basically your Javascript could be shortened to:
$(".question").click(function(argument) {
$(this).parent().find(".answer").removeClass("hideinit").addClass("display");
});
In order to make this work the only other thing you need to do is to make question a class rather than as an id. That looks like:
<p class="answer hideinit">the answer</p>
See the fiddle here
Edit: Add Hide / Show
To get this to hide and show as expected you'll want to update the code to check the current class before hiding and showing. That looks like:
$(".question").click(function(argument) {
var el = $(this).parent().find(".answer");
if (el.hasClass("display")) {
el.removeClass("display").addClass("hideinit");
} else {
el.removeClass("hideinit").addClass("display");
}
});
See the fiddle here
Well, for one thing, in your JSFiddle you were not including the jQuery library. I've adjusted your code, I think this is what you were going for:
$(".question").click(function() {
$(this).siblings().toggle();
});
Here's an updated JSFiddle.
Please watch your includes in your JSFiddle as the version you linked was not including the jQuery library. You should also clean up your multiple id references (as this is invalid HTML and will cause some issues down the road).
Those issues aside, you can use jQuery's .next() method to help you with this particular problem:
$(".question").click(function (argument) {
$(this).next(".hideinit").removeClass("hideinit").addClass("display");
});
JSFiddle
$(".question").on('click',function() {
$(this).next().toggle();
});

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

JS-Linking to an anchor inside the document in the onclick() event

I have a problem on the following code, imagine the rest is okay (html, head, body etc)
What I want to do is, when you click on one of the buttons the hidden text/images in the section show or hide, the code does that just fine. The problem is I also want it to take you to an anchor in that newly appeared section when you click on the button, and I cant seem to do that.
Here's the code on the HTML
<h2 class="especial">TITLE</h2>
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
<p class="interior">Blablah this is the content of section1</p>
</div>
<div id="Section2" style="display:none">
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
<p class="interior">Blablah content of section2</p>
</div>
And here's the JS function that controls the onclick event, I have one for each section, but they are all the same.
<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;
function show_sect1(){
if (sect1_guardian == 0) { document.getElementById("Section1").style.display="block";
sect1_guardian=1;
//Close the other sections if opened
document.getElementById("Section2").style.display="none";
document.getElementById("Section3").style.display="none";
//Reset guardians
sect2_guardian=0;
sect3_guardian=0;
}
else {
document.getElementById("Section1").style.display="none";
sect1_guardian=0;
}
}
Where and how should I add the link to the anchor? If i tried adding it to the button tag and the onclick event. I do something like this
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
Because the onclick event is in the image and I don't want the text to be hiperlinked. Clearly I'm loosing something/doing something wrong, probably an humiliating mistake, but I ask for suggestions and corrections.
If it's exactly a copy paste of your code, the onclick handler is called 'show_section1()' and the function is called 'show_sect1()'. Notice sect != section :) .
Should we look further?
You can have the html you proposed and do something like this:
window.location = document.getElementById("Section1").parentNode.href;
Replace 'Section1' with your particular section.
Allright, I found a solution, it was far easier and probably nobody said it because I was presenting the problem in the wrong way, but perhaps this will help somebody.
I wanted to make the button take you to an anchor in the document, right?
The code above worked well, you clicked on the button and it showed hidden text, or hide it.
Now, adding the following to the button code, it does the anchor thingy also.
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
I just added a tag to link the button, and used the HTML id (which I already used for the JS) to function as an anchor. I hope to have explained it clearly, and that it helps somebody!
Key was, use the html id as an anchor

Categories