We Keep Coding

Changing Text of HTML Button Using Outside JS Variable

In my main HTML file, I create a variable using this script:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//Creation of answerjson not shown
var choiceOne = answerjson[0].choice;
});
Later in my HTML, I create a button within a div using this code:
<div id= "one"><button class="button" id = "b1"></button></div>
How can I display the value of choiceOne as the label on button b1? I've searched online, but only found answers to this problem when the button is not in a div.

var choiceOne = "Some Text";
// jQuery
$("#b1").text(choiceOne);
// Regular JavaScript
document.getElementById("b2").innerHTML = choiceOne;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"><button class="button" id="b1"></button></div>
<div id="two"><button class="button" id="b2"></button></div>

Like this:
$('#b1').html(choiceOne);
but you need to do this in
$(document).ready(function() { });
so you are sure all of the DOM is ready and loaded ... not sooner

Access the button from inside your javascript and change the text on it using the following command:
document.getElementById("b1").innerHTML = choiceOne;
This is in regular JS. You can also use JQuery to select the container.

Add Div Text code inline to onclick event

I have a div where I would like to get the value and use it inside an onclick event.
Here's the div.
<div id="cars">100</div>
Then I need to enter the id cars text or html into the message below.
So I need to insert the 100 where is said INSERT HERE in the code below.
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello INSERT HERE')" src="images/share_text.png" style="height:2em" />
How can I do this?

In plain javascript:
document.getElementById('cars').innerHTML
or with jQuery:
$('#cars').text()

This will be very simple using jquery
$("#cars").text();
Will give you the text

If you want the jQuery solution use .html() to get the text between the start/close div tags.
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello' + $('#cars').html())" src="images/share_text.png" style="height:2em" />

Its not suggested to include jquery/ javascript code in html code. I suggest you can do this on document.ready event as below, you need to give an "id" to your image tag also.
HTML code (add id to image tag)
<div id="cars">100</div>
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello INSERT HERE')" src="images/share_text.png" style="height:2em" id="image_id" />
Jquery Code:
$( document ).ready(function() {
var car_val = $("#cars").html();
var onclick_Val = $("#image_id").attr("onclick");
var onclick_new_val = onclick_Val.replace('INSERT HERE', car_val);
$("#image_id").attr( 'onclick', onclick_new_val );
});

Remove div and replace using button onclick

i would like remove a current div and replace with another using onclick with a button
i've tried the below method but as the old and new div's both contain different scripts it doesn't load the scripts in the new div correctly
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
I guess the best way is to actually remove div1 and replace with div2 loading a fresh?
how would i do this?
i've tried the jquery solutions but my website doesn't seem to like jquery. anyone know why? i've tried pure javascript and that works but not jquery. i'm loading jquery in the head :(
i understand my template relies heavily on mootools which can conflict with jquery

jsFiddle
<div id="div1">div1 contents</div>
<div id="div2" style="display: none">div2 contents</div>
<button id="button">Button</button>
$('#button').on('click', function() {
$('#div1').remove();
$('#div2').show();
});
Or if you just want to replace the HTML
$('#button').on('click', function() {
$('#div1').html($('#div2').html());
});

You can accomplish this easier with jquery, first be sure to put the jquery include within your head tags. This is the latest version of jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
given this html:
<div id="div1">div1</div>
<div id="div2">div2</div>
<button id="toggle">toggle</button>
and this css:
#div2 { display:none; }
you can use this jquery:
$("#toggle").click( function() {
$("#div1,#div2").toggle();
});
this will toggle back and forth between the divs, jsfiddle here > http://jsfiddle.net/WMPx7/
if you don't want to toggle the divs, you can change the jquery to look like this:
$("#toggle").click( function() {
$("#div1").hide();
$("#div2").show();
});

I am presuming that your both div have an id attribute and have some data.
Pure Javascript
function fnChangeDivContent(){
document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
}
HTML
<input type ="button" value = "Replace Div Content" onclick = "fnChangeDivContent()" />
might help you.

Try this:
hideshow divs
and the js:
function elements() {
$('#div1').hide();
$('#div2').show();
}

Using jquery to write information from other parts of the document

<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());
});

Javascript Ajax JQuery

Here's my issue.
I have a javascript function that update a div when i click the proper link. And it is working.
Since i have cliked the link my div content is updated with another Javascript. This time to close it.
Its fairly simple but i cant get it to work and i dont know why!
Here is the code that is in the page when it load for the first time
The div id config_window
<div id="config_window" class="config_window">
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn"class="admin_btn">administration.</div>
<div id="test">test</div>
</div>
Now the Javascript that call for the update inside that div
<script language="javascript" type="text/javascript">
$("#admin_btn").click(
function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
}
);
</script>
So far it's working my div is getting updated and i see the new content. The new content is
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn_x" class="admin_btn">Terminer.</div>
<script language="javascript" type="text/javascript">
$("#admin_btn_x").click(
function(){
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
}
);
</script>
i was expecting that same function to work but its not!! and i dont get why since the first one is.
Could it be becuse my second script is in the div that get updated??
Thanks!

I suspect it's because the element that the second handler is supposed to apply to doesn't exist until after the DIV is updated and the function applying the handler is executed before the DIV is updated -- therefore the handler is not applied. You might want to try using the live handlers for the click event so that it will apply to all elements matching the selector no matter when the element is added. You can add both handlers on page load and they will apply to the elements with those ids whether they are added dynamically or not.
<script type="text/javascript">
$("#admin_btn").live('click', function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
});
);
$('#admin_btn_x').live('click', function() {
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
});
</script>

Is there a reason you add divide the function into two scripts? I would change your script to something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#config_window').hide(); // just in case
$('#admin_btn').bind("click", function() {
if($('#config_window').is(':hidden')){
$('#config_window').show();
config_set('config_window','open','var')
} else {
$('#config_window').hide();
config_set('config_window','close','var')
}
});
});
</script>