Using switches to add blocks of HTML [duplicate] - javascript

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
Here's what I am trying to do in (jquery,html):
The aim is to make it so that when I hit the switch (basic/advanced) a block of html is added to the existing html. Within this new block there will be another switch (less/more) which should added another block.
However I can't seem to (less/more) switch to work. In fact the function is not running at all.
The function that corresponds to the (basic/advanced) switch is:
var selectInvestment = "basic";
function expandInvestment(){
$("input[type=radio][name=expandInformation]").click(function(){
selectInvestment = $(this).val();
var huge = 'huge block of html code in here';
if(selectInvestment == "advanced"){
$('.investmentBlock').empty();
$('.investmentBlock').append(huge);
expandedExpenses();
} else if(selectInvestment == "basic"){
$('.investmentBlock').replaceWith("<...more html code...>");
}
});
}
And it's similar for the less/more switch.
Here is jsfiddle preview. http://jsfiddle.net/1g6uraht/1/

Because you're dynamically adding your new radio buttons, you'll need to use on
$("input[type=radio][name=expandedExpenses]").click(function(){
becomes
$("document").on('click', 'input[type=radio][name=expandedExpenses]', function(){
see jquery on

Related

How to make and edit an Html div in javascript [duplicate]

This question already has answers here:
Dynamically creating HTML elements using Javascript?
(6 answers)
Closed 2 years ago.
Trying to make an Html div inside a div that is already made using javascript but my function has a problem.
Html part
<div id="test">
<button onclick="addDiv()">test</button>
</div>
Js part
let page = document.querySelector('test');
function addDiv() {
document.createElement('div')
document.querySelector('page')
addedDiv = document.appendChild('div')
page = document.appendChild('div')
document.getElementById('div').innerHTML = "ThisFunctionIsWorking"
}
the output should be seen in the console with a text inside the div that says ThisFunctionIsWorking
but instead I get an error(Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.)
I would appreciate your time helping me...
Your code is incorrect in many ways. I suggest you study basic (web) programming with the emphasis on fundamentals like return values, scope, etc. and then basic javascript and dom tree manipulation.
A solution to your problem is:
<div id="test">
<button onclick="addDiv('test')">test</button>
</div>
function addDiv(nodeId) {
var elem = document.createElement('div')
var container = document.getElementById(nodeId)
container.appendChild(elem)
elem.innerHTML = "ThisFunctionIsWorking"
}

jquery on click not working for dynamically added items [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I'm adding some code(!with js code included!) dynamically.
<div class="r"></div>
<script>
//Here is code that dinamiccaly add another div into div.r
//Example:
//<div class="w"><img src="a.png"><div class="i">Some Text</div></div>
$('.r').on('click', $('.w'), function (e) {
console.log($(this).children($('.i')).text());
});
</script>
Problem that this click event works anythere I click in div.w and returns text of ALL div.w combined in one string without spaces (sometext1sometext2).
Sorry if I wrote something wrong. I'm bad in english.
Event delegation is wrong. You are using a jQuery collection
$('.r').on('click', $('.w'), function (e) {
^^^^^^^
where it should be just a selector
$('.r').on('click', '.w', function (e) {
^^^^
The selector has to be of type string. Look at the following:
$('.r').on('click', '.w', function (e) {
from documentation of on

Javascript starts with or contains [duplicate]

This question already has answers here:
jQuery match part of class with hasClass
(6 answers)
jQuery selector for id starts with specific text [duplicate]
(4 answers)
Closed 4 years ago.
Trying to get some help on some JavaScript we are trying to post accross multiple landing pages. We are sending values to hidden fields on a button click 'lp-pom-button-3'.
However, the ID changes depending on the page, but will always have the format 'lp-pom-button-' with the number potentially changing depending on the page. Is there a function similar to 'like' in SQL, or saying any button that starts with or contains 'lp-pom-button-" for this to be triggered on? Thanks for you help!
<script type="text/javascript">
document.getElementById('lp-pom-button-3').addEventListener(
'click', function(event) {
ga(function() {
var tracker = ga.getAll()[0];
var clientId = tracker.get('clientId');
document.getElementById('GACLIENTID').value = clientId;
var userId = tracker.get('userId');
document.getElementById('GAUSERID').value = userId;
});
});
You can use the css selector for attribute value contains.
[id*="lp-pom-button-"]
or attribute value starts with:
[id^="lp-pom-button-"]
In vanilla javascript you can access elements using css selector with querySelector or for getting a list of elements querySelectorAll.
Here is an example:
document.querySelector('[id^="lp-pom-button-"]');
And HERE is a list of all the browsers and browsers version that support this function.

How to add onclick listener to a element to get corresponding text [duplicate]

This question already has answers here:
Javascript infamous Loop issue? [duplicate]
(5 answers)
JavaScript variable binding and loop
(4 answers)
Closed 7 years ago.
i have a list of pre tags
<pre class="fruit">mango</pre>
<pre class="fruit">apple</pre>
<pre class="fruit">guava</pre>
now i create div tags dynamically and show next to pre tags .like this
this is the jsfiddle preview with all the codes
now what i want is get text of pre when i click div next to it.for example if i click first green div i want to get mango.
but the problem is i can't understand how can i add listners to div to achive this.content of pre tags can be changed .
how i tried it
var box=box=document.getElementsByClassName("fruit");
for(var i=0;i<box.length;i++){
var mydiv=document.createElement("div");
mydiv.onclick= function(){func(i);};
}
function func(x){
//alert(x); // x is always 4 because when this get fired i has increased to 4 in the loop.
var text = box[x].innerText || box[x].textContent;
alert(text);
}
the problem is when funt() trigger value of i has changed .how can i achieve this ??

Bind a event on an element [duplicate]

This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 8 years ago.
What is the best way to bind an event on multiple element .
I wrote this code to do that is there is any good way to do that.
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
I have two input box with first name and last name, i wont to display there first anme and last name into a another element
Give the elements a class and add the event to the class.
$('.theclassnamethatalltheelementsshare').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+""+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
maybe this works
$(document).ready(function(){
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur',function(){
var gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
});
Fiddle

Categories