This is the HTML code:
<div id="CurrencyQuotePane">
<div class="CurrencyQuote">
<div class="column">
<div class="form-label">Pair: </div><div>1/2</div>
<div class="form-label padding-top">Spread: </div><div>385</div>
</div>
<div class="column">
<div class="form-label">Rate: </div><div>1/2</div>
<div class="form-label padding-top">High/Low: </div><div>2002.0/0.0055</div>
</div>
</div>
<div class="clear"></div>
</div>
How do I get the 385 in Javascript if it keeps changing?
This is my current javascript:
function getSpread(){
var tag = iframe.contentDocument.getElementByClassName('SPREAD');
var spread = Number(tag[1].innerHTML);
return spread;
}
Sorry if I don't know anything about javascript, I am a complete newbie.
Change it to this:
<div class="column">
<div class="form-label">Pair: </div><div>TEXT</div>
<div class="form-label padding-top">SPREAD</div><div id="spreadval">385</div>
</div>
function getSpread(){
var tag = iframe.contentDocument.getElementById('spreadval');
return parseInt(tag.innerHTML);
}
var column = document.getElementsByClassName('column');
var divs = column[0].getElementsByTagName('div');
alert(divs[1].innerHTML);
set id to your div
<div class="column">
<div class="form-label">Pair: </div><div>TEXT</div>
<div class="form-label padding-top">SPREAD</div><div id="changing_number">385</div>
</div>
get with jquery
$(function(){
var theNumber = parseInt($('#changing_number').text());
});
or with DOM:
$(function(){
var theNumber = parseInt(document.getElementById('changing_number').innerHTML);
});
here you can learn js: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
Related
I am creating calculator with Javascript and i have a problem with eval() function
HTML
`
<div class="calCul1">
<div id="firstCol">
<div id="wind"></div>
</div>
<div id="secondCol">
<div class="buttonsCol1">
<div id="underCol1">
<div id="bracketOpen"><button id="bracketOBut" onclick=" ">!</button></div>
<div id="seven"><button id="sevenBut" onclick="add(7)">7</button></div>
<div id="four"><button id="fourBut" onclick="add(4)">4</button></div>
<div id="one"><button id="oneBut" onclick="add(1)">1</button></div>
<div id="zero"><button id="zeroBut" onclick="add(0)">0</button></div>
</div>
<div id="underCol2">
<div id="bracketClose"><button id="root" onclick=" "add>√</button></div>
<div id="eight"><button id="eightBut" onclick="add(8)">8</button></div>
<div id="five"><button id="fiveBut" onclick="add(5)">5</button></div>
<div id="two"><button id="twoBut" onclick="add(2)">2</button></div>
<div id="dote"><button id="doteBut" onclick="addDote('.')">.</button></div>
</div>
</div>
<div class="buttonsCol2">
<div id="underCol3">
<div id="procent"><button id="procentBut" onclick="procent('%')">%</button></div>
<div id="nine"><button id="nineBut" onclick="add(9)">9</button></div>
<div id="six"><button id="sixBut" onclick="add(6)">6</button></div>
<div id="three"><button id="threeBut" onclick="add(3)">3</button></div>
<div id="equals"><button id="equalsBut" onclick="equal('=')">=</button></div>
</div>
<div id="underCol4">
<div id="delete"><button id="deleteBut" onclick="document.getElementById('wind').innerHTML=''">AC</button></div>
<div id="divide"><button id="divideBut" onclick="add('/')">÷</button></div>
<div id="multiply"><button id="multiplyBut" onclick="add('*')">x</button></div>
<div id="minuse"><button id="minuseBut" onclick="add('-')">-</button></div>
<div id="plus"><button id="plusBut" onclick="add('+')">+</button></div>
</div>
</div>
</div>
</div>
`
there is no reaction when i click on "+"
Javascript
let x = document.getElementById("wind");
function add(a) {
// document.getElementById("wind").value =
x.innerHTML += a;
}
function equal() {
// x.style.cssText = `d`
x = eval(x);
// console.log(x);
}
i tried to solve it with .value, but then I couldnt even print the numbers
You probably want to run the eval() function on the text of the wind element - i.e x.innerText - instead of on the element itself - which is what eval(x) is doing.
Also, using eval() to perform arithmetic is a really bad idea.
The issue is here: x = eval(x);. You are just getting all of the object. In your code, the x variable means that the Document method getElementById(). It returns an element object. You should get the element's value, not all of its. Because of that, we use the element property innerHTML. the innerHTML property gets or sets the HTML or XML within the element.
Hope it helps! In addition: Never use eval()!
let x = document.getElementById("wind");
function add(a) {
// document.getElementById("wind").value =
x.innerHTML += a;
}
function equal() {
// x.style.cssText = `d`
x.innerHTML = eval(x.innerHTML);
// console.log(x);
}
<div class="calCul1">
<div id="firstCol">
<div id="wind"></div>
</div>
<div id="secondCol">
<div class="buttonsCol1">
<div id="underCol1">
<div id="bracketOpen"><button id="bracketOBut" onclick=" ">!</button></div>
<div id="seven"><button id="sevenBut" onclick="add(7)">7</button></div>
<div id="four"><button id="fourBut" onclick="add(4)">4</button></div>
<div id="one"><button id="oneBut" onclick="add(1)">1</button></div>
<div id="zero"><button id="zeroBut" onclick="add(0)">0</button></div>
</div>
<div id="underCol2">
<div id="bracketClose"><button id="root" onclick=" "add>√</button></div>
<div id="eight"><button id="eightBut" onclick="add(8)">8</button></div>
<div id="five"><button id="fiveBut" onclick="add(5)">5</button></div>
<div id="two"><button id="twoBut" onclick="add(2)">2</button></div>
<div id="dote"><button id="doteBut" onclick="addDote('.')">.</button></div>
</div>
</div>
<div class="buttonsCol2">
<div id="underCol3">
<div id="procent"><button id="procentBut" onclick="procent('%')">%</button></div>
<div id="nine"><button id="nineBut" onclick="add(9)">9</button></div>
<div id="six"><button id="sixBut" onclick="add(6)">6</button></div>
<div id="three"><button id="threeBut" onclick="add(3)">3</button></div>
<div id="equals"><button id="equalsBut" onclick="equal('=')">=</button></div>
</div>
<div id="underCol4">
<div id="delete"><button id="deleteBut" onclick="document.getElementById('wind').innerHTML=''">AC</button></div>
<div id="divide"><button id="divideBut" onclick="add('/')">÷</button></div>
<div id="multiply"><button id="multiplyBut" onclick="add('*')">x</button></div>
<div id="minuse"><button id="minuseBut" onclick="add('-')">-</button></div>
<div id="plus"><button id="plusBut" onclick="add('+')">+</button></div>
</div>
</div>
</div>
</div>
How can I achieve something like this.
I have a Container with
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
What I now want to archieve for example: If I have
const div1ToSwap = ( div 1 )
const div2ToSwap = ( div 4 )
That the final result will be
<div class="div4">4</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div1">1</div>
<div class="div5">5</div>
This is a very hacky way to do it, but this way you don't need to remove all elements then append them back in.
let div1 = document.querySelector(".div1");
let div4 = document.querySelector(".div4");
let temp = div1.cloneNode(true);
div1.innerHTML = div4.innerHTML;
div1.className = div4.className;
div4.innerHTML = temp.innerHTML;
div4.className = temp.className;
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
it's simple, first you need to container all the div you need to make this script like this, we will write the function later
you can try it by the link https://codepen.io/nt0412/pen/rNJWMKP
<div class="all-div-container">
<div class="div1" onclick="swapDiv(event,this);">
1
</div>
<div class="div2" onclick="swapDiv(event,this);">
2
</div>
<div class="div3" onclick="swapDiv(event,this);">
3
</div>
<div class="div4" onclick="swapDiv(event,this);">
4
</div>
<div class="div5" onclick="swapDiv(event,this);">
5
</div>
</div>
<script type="text/javascript">
function swapDiv(event, elem) {
elem.parentNode.insertBefore(elem, elem.parentNode.firstChild);
}
</script>
I am trying to get first letter of firstname and lastname from a div and paste it in another div but it is pasting the same value in all divs and not taking unique value from each div.
Working Fiddle: https://jsfiddle.net/bv7w8dxg/1/
Issue Fiddle: https://jsfiddle.net/bv7w8dxg/
var takword = $('.nameholder').text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder').text(text);
Markup
`
John Doe
<div class="main-holder">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>`
You are using class selectors, which selects all elements with the given class name. That's why you have all the elements set with same value
You need to wrap your elements then process each row independently
I updated your code snippet to demonstrate this:
$('.row').each(function() {
var takword = $('.nameholder', this).text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder', this).text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="nameholder">John Doe</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>
Example:
I have a variable amount of rows, each with 3 divs with classes like so:
<div class="row>
<div class='date'>1/2/2018</div>
<div class='event'>concert</div>
<div class='act'>Pink Floyd</div>
</div>
<div class="row>
<div class='date'>12/5/2017</div>
<div class='event'>dj set</div>
<div class='act'>Moby</div>
</div>
<div class="row>
<div class='date'>5/5/2018</div>
<div class='event'>movie</div>
<div class='act'>Ant-Man</div>
</div>
How can I use jQuery to gather them into an associative array that I'll be passing to php to INSERT into a database table?
You can use map to loop thru the .row div. Use reduce to group the inner divs into a js object.
var result = $('.row').map(function() {
return $(this).find('div').toArray().reduce(function(c, v) {
c[$(v).attr('class')] = $(v).text();
return c;
}, {});
}).get();
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class='date'>1/2/2018</div>
<div class='event'>concert</div>
<div class='act'>Pink Floyd</div>
</div>
<div class="row">
<div class='date'>12/5/2017</div>
<div class='event'>dj set</div>
<div class='act'>Moby</div>
</div>
<div class="row">
<div class='date'>5/5/2018</div>
<div class='event'>movie</div>
<div class='act'>Ant-Man</div>
</div>
To select each all the div with the class row use this
var rows=$('div.row');
To loop through it use this
var array=[];
for(var i=0;i <rows.length;i++){
$.each(rows,function(){
var children=this.children('div');
$.each(children,function(){
var index=this.attr('class');
var value=this.text();
array[i][index]=value;
});
});
}
console.log(array);
I would like to use jQuery to wrap sets of class elements in a div but can't find the solution.
HTML:
<div class="view-content">
<div class="first">content</div>
<div class="first">content</div>
<div class="second">content</div>
<div class="third">content</div>
<div class="third">content</div>
</div>
Desired Result:
<div class="view-content">
<div class="column">
<div class="first">content</div>
<div class="first">content</div>
</div>
<div class="column">
<div class="second">content</div>
</div>
<div class="column">
<div class="third">content</div>
<div class="third">content</div>
</div>
</div>
Demo http://jsfiddle.net/kQz4Z/8/
API: http://api.jquery.com/wrapAll/
Added a break line so that you can see the difference here :) http://jsfiddle.net/kQz4Z/10/
code
$(function() {
$('.first').wrapAll('<div class="column" />')
$('.second').wrapAll('<div class="column" />')
$('.third').wrapAll('<div class="column" />')
alert($('.view-content').html());
});
Use wrapAll() method
$(function(){
var classes = ['.first', '.second', '.third'];
for (i = 0; i < classes.length; i++) {
$(classes[i]).wrapAll('<div class="column">');
}
});
Demo: http://jsfiddle.net/g9G85/
Or here is the very short dynamical solution:
$(".view-content > div").each(function() {
$(".view-content > ." + this.className).wrapAll("<div class='column' />");
});
DEMO: http://jsfiddle.net/CqzWy/
You can use .wrap() to wrap something in a div but if your content is not ordered it will become a mess, here's an example:
Input
<div class="view-content">
<div class="first">content</div>
<div class="second">content</div>
<div class="first">content</div>
</div>
Output
<div class="view-content">
<div class="column">
<div class="first">content</div>
<div class="column">
<div class="second">content</div>
</div>
<div class="first">content</div>
</div>
</div>
You could try whit this:
var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get();
var results = $.unique(arr);
var i;
for(i = 0; i < results.length; i++){
$('.out').append('<div class="columns"></div>');
$('.'+results[i]).clone().appendTo('.columns:last');
}
alert($('.out').html());
Here an example:
JSFIDDLE