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 }}
Related
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 have the following code where if I click a button, the corresponding div's display will be set to "block":
JavaScript:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
HTML:
<button id="Ideas" class="btn btn-info" onclick=toggle_visibility("one")>Ideas</button>
<button id="Problem" class="btn btn-info" onclick=toggle_visibility('two')>Problem </button>
<button id="Question" class="btn btn-info" onclick="window.location.href ='/'">Question</button>
<button id="Praise" class="btn btn-info" onclick="window.location.href ='/'">Praise</button>
<br>
<section class="content">
<div id="one">
<h1>Ideas</h1>
<form method="post" action="/feedback">
{{ render_field(form.test_field, class_='form-control')}}
{{ render_field(form.title, class_='form-control') }}
{{ render_field(form.information, class_='form-control') }}
<input type = "submit" value = "submit" class="btn btn-info"/>
</form>
</div>
<div id="two" style="display:none">
<form method="post" action="/feedbackpb">
<h1>Problem</h1>
{{ render_field(form.test_field, class_='form-control')}}
{{ render_field(form.title, class_='form-control') }}
{{ render_field(form.information, class_='form-control') }}
<input type = "submit" value = "submit" class="btn btn-info"/>
</form>
</div>
</section>
However, what I need here is that on button click, all these DIVs display should be set to none except for the div corresponding with the button I click.
Rather than adding an inline onclick listener on each button, just replace it with a data attribute instead with the name of the corresponding id of the div that you want to hide as it's value. Also, you need to add a common class name for all your divs, say box so you can loop through them later.
After adding the attribute values, you can now add an event listener to all your buttons and pass their respective dataset value as a parameter for your toggle_visibility() function.
Now inside the function, assign all the box divs to a variable using querySelectorAll() and just simply loop through the list of divs, compare every single div's id with the data attribute value in the parameter and set it's display to block while setting the display for the rest of the divs to none.
Check this jsFiddle or the Code Snippet below for a practical example of the above:
var buttons = document.querySelectorAll('button[data-id]');
function toggle_visibility(id) {
var boxes = document.querySelectorAll("div.box");
boxes.forEach(box => {
if(box.id == id) {
box.style.display = "block";
} else {
box.style.display = "none";
}
})
}
buttons.forEach(btn => {
var x= function() { toggle_visibility(btn.dataset.id) };
btn.addEventListener("click", x);
});
<button id="Ideas" class="btn btn-info" data-id="one">Ideas</button>
<button id="Problem" class="btn btn-info" data-id="two">Problem</button>
<button id="Ideas2" class="btn btn-info" data-id="three">Ideas2</button>
<button id="Problem2" class="btn btn-info" data-id="four">Problem2</button>
<button id="Question" class="btn btn-info" onclick="window.location.href ='/'">Question</button>
<button id="Praise" class="btn btn-info" onclick="window.location.href ='/'">Praise</button>
<hr>
<div class="box" id="one">
<h1>Ideas</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="two">
<h1>Problem</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="three">
<h1>Ideas2</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="four">
<h1>Problem2</h1>
<p>
Some Form Here
</p>
</div>
BUT WHAT IF I WANT TO DISPLAY ALL THE DIVs TOGETHER AGAIN?
You can just add another button to your list and add a separate click listener to the button that runs a function, say showAllPanels() that displays all the divs again as shown in this jsFiddle or in the Code Snippet below:
function toggle_visibility(id) {
var boxes = document.querySelectorAll("div.box");
boxes.forEach(box => {
if(box.id == id) {
box.style.display = "block";
} else {
box.style.display = "none";
}
})
}
var buttons = document.querySelectorAll('button[data-id]');
var showAll = document.getElementById("showAll");
buttons.forEach(btn => {
var x= function() { toggle_visibility(btn.dataset.id) };
btn.addEventListener("click", x);
});
function showAllPanels(){
var boxes = document.querySelectorAll("div.box");
boxes.forEach(box => {
box.style.display = "block";
});
}
showAll.addEventListener('click', showAllPanels);
<button id="Ideas" class="btn btn-info" data-id="one">Ideas</button>
<button id="Problem" class="btn btn-info" data-id="two">Problem</button>
<button id="Ideas2" class="btn btn-info" data-id="three">Ideas2</button>
<button id="Problem2" class="btn btn-info" data-id="four">Problem2</button>
<button id="Question" class="btn btn-info" onclick="window.location.href ='/'">Question</button>
<button id="Praise" class="btn btn-info" onclick="window.location.href ='/'">Praise</button>
<button id="showAll" class="btn btn-info">Show All</button>
<hr>
<div class="box" id="one">
<h1>Ideas</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="two">
<h1>Problem</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="three">
<h1>Ideas2</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="four">
<h1>Problem2</h1>
<p>
Some Form Here
</p>
</div>
I have created several input boxes with some logic behind. I need to create a logic for only one input box that if it's the first click, it should increment the value from 0 to 2, and then just a normal increment +1. so to make it clear, the addition should be as follows:
0 > 2 > 3 > 4
If the user clicks on the minus, it should reduce by 1 unless it comes to the value of 2 as than the subtraction should be to 0, so to explain its as follows:
4 > 3 > 2 > 0
$("#1, #2, #3, #4").prop('disabled', true);
$('.add').click(function () {
var value1 = $('#1').val();
var value2 = $('#2').val();
var value3 = $('#3').val();
var value4 = $('#4').val();
var totalValue = parseInt(value1) + parseInt(value2) + parseInt(value3) + parseInt(value4);
if ( totalValue >= 5){
$('.add').prop('disabled', true);
} else {
$(this).prev().val(+$(this).prev().val() + 1);
}
});
$('.sub').click(function () {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="field1">field 1
<button type="button" id="sub" class="sub">-</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button>
</div>
<div id="field2">field 2
<button type="button" id="sub2" class="sub">-</button>
<input type="text" id="2" value="0" class="field" />
<button type="button" id="add2" class="add">+</button>
</div>
<div id="field2">field 3
<button type="button" id="sub3" class="sub">-</button>
<input type="text" id="3" value="0" class="field" />
<button type="button" id="add3" class="add">+</button>
</div>
<div id="field2">field 4
<button type="button" id="sub4" class="sub">-</button>
<input type="text" id="4" value="0" class="field" />
<button type="button" id="add4" class="add">+</button>
</div>
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;
I have two submit buttons: 'positive' and 'negative' in my html part. What i want to happen is that when user presses SHIFT KEY and then does mousedown anywhere on the body the POSITIVE BUTTON should get submitted and the NEGATIVE BUTTON should get submitted on pressing CTRL KEY and doing mousedown. My code is as follows:
<head>
<script>
function check(event)
{
if (event.shiftKey==1)
{
var b1=document.getElementById('btn1');
b1.submit();
}
if (event.ctrlKey==1)
{
var b1=document.getElementById('btn1');
b2.submit();
}
}
</script>
</head>
<body onmousedown="check(event)">
<form method="post" action="fetch_page.php">
<input type="submit" name="submit1" value="Positive" id="btn1" class="btn btn-primary"></input>
<input type="submit" name="submit2" value="Negative" id="btn2" class="btn btn-primary"></input>
</form>
</body>
Can someone tell me where am i going wrong??
<head></head>
<body>
<form method="post" action="fetch_page.php">
<input type="submit" name="submit1" value="Positive" id="btn1" class="btn btn-primary"></input>
<input type="submit" name="submit2" value="Negative" id="btn2" class="btn btn-primary"></input>
</form>
<script>
document.addEventListener('click', function(e) {
if (e.shiftKey) document.getElementById('btn1').click();
if (e.ctrlKey) document.getElementById('btn2').click();
}, false);
</script>
</body>