Reffering to my previous question (about simple pocket calculator), I try to rewrite it using MVC pattermn. I understand the basics of MVC but to implement it is pretty difficult for a beginner. so my html code is :
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/SimpleCalculator.css">
<script type="text/javascript" src = "js/SC_Controller.js"></script>
<script type="text/javascript" src = "js/SC_Model.js"></script>
<script type="text/javascript">
new SC_Controller().init();
</script>
</head>
<body>
<h2>Simple Calculator</h2>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="displayId"></div>
<div class="keys">
<p><input type="button" class="button black" value="7">
<input type="button" class="button black" value="8">
<input type="button" class="button black" value="9">
<input type="button" class="button orange" value="/">
</p>
<p><input type="button" class="button black" value="4">
<input type="button" class="button black" value="5">
<input type="button" class="button black" value="6">
<input type="button" class="button orange" value="*">
</p>
<p><input type="button" class="button black" value="1">
<input type="button" class="button black" value="2">
<input type="button" class="button black" value="3">
<input type="button" class="button orange" value="-">
</p>
<p><input type="button" class="button black0" value="0">
<input type="button" class="button black" value=".">
<input type="button" class="button orange" value="+"></p>
<p><input type="button" class="button greenc" value="C">
<input type="button" class="button yelloweq" value="="></p>
</div>
</div>
</body>
and my two JS filController.js are :
SC_Controller.js
var SC_Controller = function(scModel){
var model = scModel || new SC_Model();
var s = "";
function clicked(){
s += model.getValue();
alert(s);
model.setValue(s);
}
function init(){
document.getElementsByClassName("button").onclick = clicked;
}
return {
init : init;
model : model
};
};
and
SC_Model.js
var SC_Model = function(){
function getValue(){
return(document.getElementsByClassName('button').value);
}
function setValue(val){
document.getElementById('displayId').value = val;
}
return{
getValue : getValue,
setvalue : setValue
};
};
To implement a MVC pattern, I googled and found an example. I tried to adapt it to my calculator code, but launching the HTML, when I click a key the alert box in SC_Controller.js does not pop up. I can not understand why. Could you help me ?
The document.getElementsByClassName("button") returns a collection of nodes
(see https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName).
You need to iterate over them when applying the click handler as well as when requestion their .value.
For instance, the
document.getElementsByClassName("button").onclick = clicked;
should be
var buttons = document.getElementsByClassName("button");
for(var i=0;i<buttons.length;i++)
buttons[i].onclick = clicked;
Related
How to add number value when i click button?
For example
If i click 100,000 twice,
200,000 will be entered in the input.
$(document).ready(function() {
$('#myform button').on('click', function() {
$('#cvalue').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
Not trivial
const fmt = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
$(document).ready(function() {
const $cvalue = $('#cvalue');
$('#myform .button1').on('click', function() {
const val = +$(this).val().replace(/\D/g, "") + +$cvalue.val().replace(/\D/g, "")
$cvalue.val(fmt.format(val));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money" value="0">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
I am trying to make my code submit a boolean button with two options. I am trying to trigger the S and K keypress to submit each button. I saw the following code, but when I try it, it doesn't run.
This is my HTML code. Each button has a function that give me a timestamp of the click, submit the page and save the option that the participant chooses (A or B).
<!DOCTYPE html>
<html>
<body>
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1A" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1B" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
<!--The keypress code-->
<script>
var input = document.getElementById("of1A");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 75) {
event.preventDefault();
document.getElementById("of1A").click();
});
var input = document.getElementById("of1B");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 83) {
event.preventDefault();
document.getElementById("of1B").click();
}
});
//The function that gives me a timestamp
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
</script>
</body>
Without the keypress code the code runs in the next way:
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
I have the following code to save a person's timestamps when he clicks on one of two buttons.
On the screen they must choose which button they prefer if A or B.
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
I want to program two keys to submit the buttons. But I need each key to be one of the buttons to know which option they chose. Also, I don't want to lose the timestamp. Can someone help me?
You mean this?
I added ID to field
function myFunction(but) {
var n = Date.now();
document.getElementById("timestamp1").value = n;
document.getElementById("c1").value = but.value;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction(this)" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction(this)" name="offer_accepted1" value="False">B</button>
</p>
<input type="text" name="timestamp1" id="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
I want to increment values by 1, when I click buttons then it is get value by input hidden and show in console. like click button add1 it is pick the value 5 and show in console and vice versa. now I want to increment value by 1 to click every button get value and increment. like click add1 and show 5 in console when I click again add1 button it os increment by 1 and show 6 and so on. any suggestion how do this?
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
On each click you can increase the value by one and set it back to the value of the input field. I would suggest you to store the input element in a variable so that you wont have to fetch that again and again.
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $el = $(this).closest('.vote').find('#_vote')
var _vote = +$el.val();
console.log(_vote);
$el.val(_vote + 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
Just set the new incremented value to the same element
$parent.find('#_vote').val( _vote + 1 );
Demo
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote);
$parent.find('#_vote').val( _vote + 1 ); //this line has been added
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
Note
Its a good idea to save the $parent.find('#_vote'), just like you did for $parent into a variable so that you don't have to fetch it again.
You can add an each loop then define i by 0 then increment i with i++ when click. In other word, you plus your current value with 0 then after second click i increment by i++ then it plus current value with 1.
jQuery(function($) {
$('.add').each(function() {
var i = 0;
$(this).on('click', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote + i++);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
Please try with this jQuery function.
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
var test = _vote + parseInt(1);
var $parentId = $(this).closest('.vote');
var _voteId = $parent.find('#_vote');
_voteId.val(test);
console.log(_vote);
});
});
You can do this like Below.
Just add below two lines in your Jquery code
var _vote = parseInt($parent.find('#_vote').val()) + 1;
$parent.find('#_vote').val(_vote)
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val()) + 1;
$parent.find('#_vote').val(_vote)
console.log(_vote);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
get hidden value and increment it by one and then store this value in hidden field.
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote);
$parent.val(parseInt(_vote)+1)
Suppose I have 2 areas separated by div containers, I need to send the Id values from the different areas, locally when the function is called in that container.
extract:
<script>
document.getElementById('compare_name").innerHTML = "Changed";
</script>
<div class = "details>
<span id="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span id="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
You cannot use same ID for more than one element. you can use name instead like below:
<script>
var x = document.getElementsByName("compare_name");
for(var i = 0; i < x.length ; i++){
x[i].innerHTML = "Changed";
}
</script>
<div class = "details>
<span id="compare_name" name="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span id="compare_name" name="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
As others indicates that, to follow the rule, the ID attribute should not be duplicated, but it doesn't matter if you don't rely on it.
I guess the asker might only need to change one text inside the div which is clicked, not all the spans, so just a little change.
<html>
<head>
<title>Test</title>
<script>
function add_compare(el) {
var divChildEles = el.parentNode.parentNode.childNodes;
for (var i=0; i<divChildEles.length; i++) {
if (divChildEles[i].nodeType==1 && divChildEles[i].nodeName=="SPAN") {
//console.log(divChildEles[i].innerText);
divChildEles[i].innerText='changed';
}
}
}
</script>
</head>
<body>
<div class = "details">
<span id="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare(this)">
</form>
</div>
<div class = "details">
<span id="compare_name">no2</span>
<form id="view-details1">
<input type="button" value="Add to Compare" onclick="add_compare(this)">
</form>
</div>
</body>
</html>
id in JavaScript must be unique. instead, you can give them a class with the same name
<script>
var x=document.getElementByClassName('compare_name");
for(var i=0;i<x.lengh;i++)
x[i].innerHTML = "Changed"
</script>
<div class = "details>
<span class="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span class="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>