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>
Related
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>
I am trying to get a DOM element by class and not sure why its returning undefined. I can query the parent element without any problems. Here is my code:
var contentPane = query('.contentPane', this.map.infoWindow.domNode)[0];
var header = query('.header', this.map.infoWindow.domNode)[0];
console.log(header);
console.log(contentPane);
The output in console:
>>undefined
<div class="contentPane">
<div class="esriViewPopup" id="esri_dijit__PopupRenderer_1" widgetid="esri_dijit__PopupRenderer_1">
<div class="mainSection">
<div class="header" dojoattachpoint="_title"></div>
<div class="hzLine"></div>
<div dojoattachpoint="_description"></div>
<div class="break"></div>
</div>
<div class="attachmentsSection hidden">
</div>
<div class="mediaSection hidden">
</div>
<div class="editSummarySection hidden" dojoattachpoint="_editSummarySection">
</div>
</div>
</div>
the .header was not rendered at the time of query. I have resolved this by using query when the containing function was completed.
Chrome shows a different sort result from other browsers - with Firefox and Edge showing the desired result.
How to achieve the same result with Chrome?
I tried, but not working, with:
$(function(){
var order = $('.files').find('.first','.second').sort(sortMe);
$('.files').append(order);
});
function sortMe(a, b) {
return a.first < b.second;
}
The desired result... and the default in Firefox and other browsers is:
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
</div>
</div>
Chrome returns
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
<div class="first">content</div>
</div>
</div>
Selector at .find('.first','.second') is not correct, where second parameter should log an error Unexpected identifier, try adjusting to .find('.first, .second') without terminating string and including a literal comma , character which would pass two parameters, instead of single selector string, comparing a.dataset -b.dataset, wheredata-*` attributes have 0-based indexing from 0-n.
You can add data-* attribute at elements for comparison function.
$(function(){
var order = $('.files').find('.first, .second').sort(sortMe);
should be$('.files').append(order);
});
function sortMe(a, b) {
console.log(a.dataset)
return +a.dataset.order - +b.dataset.order;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div data-order="0" class="first">first content</div>
<div data-order="1" class="second">second content</div>
<div data-order="1" class="second">second content</div>
<div data-order="0" class="first">first content</div>
</div>
</div>
Solved this problem with jquery, but typically when different test data added to site Chrome returned expected result each time so code not needed this time...
var array = ['first', 'second'];
$.each(array,function(index,value){
$('.files').append($('.'+value));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div class="first">content for 1.1</div>
<div class="second">content for 2.1</div>
<div class="second">content for 2.2</div>
<div class="first">content for 1.2</div>
<div class="first">content for 1.3</div>
<div class="second">content for 2.2</div>
</div>
</div>
The content of the divs is going to be populated with javascript json. Now, I know how to select a div in javascript:
var hsc = document.getElementByID("hsc");
But how would I refer to eg. the title but only in the hsc div.
<div id="hsc">
<div id="title"></div>
<div id="jobs"></div>
...
</div>
<div id="cc">
<div id="title"></div
<div id="jobs"></div>
</div>
On a separate note, wouldn't 'title' and 'jobs' be better classified as classes, and not ids?
This would work:
var hsc = document.querySelectorAll("#hsc > .title");
But you need to change to valid html and use unique IDs and classes instead:
<div id="hsc">
<div class="title"></div>
<div class="jobs"></div>
...
</div>
<div id="cc">
<div class="title"></div>
<div class="jobs"></div>
</div>
IDs must be unique in HTML.
Change them to classes, and then you can use querySelector() to target them:
document.querySelector('.hsc .title').style.color= 'blue';
document.querySelector('.cc .title').style.color= 'red';
<div class="hsc">
<div class="title">Make me blue!</div>
<div class="jobs">Jobs</div>
</div>
<div class="cc">
<div class="title">Make me red!</div>
<div class="jobs">More jobs</div>
</div>
Just try
<div id="hsc">
<div id="a" class="title"></div>
<div id="b" class="jobs"></div>
...
</div>
<div id="cc">
<div id="c" class="title"></div
<div id="d"class="jobs"></div>
</div>
Because your HTML code is invalid because the id is already taken.
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