This is the part of HTML code
<div id="contentBack">
<label for="origin">평문</label><br /><br />
<input type="text" name="origintoBack" id="origin">
<label for="lockSent">암호문</label><br /><br />
<input type="text" name="lockSent" id="lockSent"><br />
<br />
<button id="backKey"><i class="fas fa-key fa-2x"></i></button>
<button id="unlockBtn"><i class="fas fa-lock-open fa-2x"></i></button>
</div>
I'd like to reset <input type="text" name="lockSent" id="lockSent"><br /> if I click the button. So I put
document.getElementsByName("origintoBack")[0].value = "";
for (var i = 0; i < originSettingArray.length; i++) { // originSettingArray 크기만큼 돌면서
document.getElementsByName("origintoBack")[0].value += originSettingArray[i][0] + originSettingArray[i][1] + " "; // 두 글자마다 띄어쓰기 넣기
} // 뒷면 평문에 평문 출력
and
document.getElementById("lockSent").value = "";
for (var x = 0; x < lockedArray.length; x++) {
document.getElementById("lockSent").value += lockedArray[x][0] + lockedArray[x][1] + " ";
}
in button onclick function in JavaScript code. Resetting the document.getElementsByName("origintoBack")[0].value = ""; works very well but
document.getElementById("lockSent").value = ""; doesn't work. There is no error on console log. I don't know what to do. Please help (;0;
I tried your code, it worked both.
function reset(){
document.getElementsByName("origintoBack")[0].value = "";
document.getElementById("lockSent").value = "";
}
<div id="contentBack">
<label for="origin">평문</label><br /><br />
<input type="text" name="origintoBack" id="origin">
<label for="lockSent">암호문</label><br /><br />
<input type="text" name="lockSent" id="lockSent"><br />
<br />
<button id="backKey"><i class="fas fa-key fa-2x"></i></button>
<button id="unlockBtn" onclick="reset();"><i class="fas fa-lock-open fa-2x"></i>Reset</button>
</div>
Related
I have 2 html pages which are for a laundry services website and I have a javascript file. The first html page is called booking page where user get to book the number of clothes to be washed and it automatically calculate the total amount to be paid. Now on the second html page which is the summary page, I want the same amount on the booking page to reflect on the summary page showing the total amount and also also the buttons (plus and minus button) adding to it in the summary page.
I tried using localStorage for this project and I couldn't figure it out.
Skirt(s)</p>
<div>
<p>
<button type="button" class="sub" data-
target="skirts">−</button>
<input type="text" value="0"
class="field_skirts" />
<button type="button" class="add" data-
target="skirts">+</button>
<p class="display_skirts" name="price"
max="3" min="1">₦ 0</p>
</p>
</div>
</div>
<div>
<div class="second-booking-container-image"><img
src="./img/blouse.png" /></div>
<p class="second-booking-container-icon"
name="product" value="100" id="qnty_4">
Blouse(s)</p>
<div>
<p>
<button type="button" class="sub" data-
target="blouses">-</button>
<input type="text" value="0"
class="field_blouses" />
<button type="button" class="add" data-
target="blouses">+</button>
<p class="display_blouses" name="price"
max="3" min="1">₦ 0</p>
</p>
</div>
</div>
<div>
<div class="second-booking-container-image"><img
src="./img/jacket.png" /></div>
<p class="second-booking-container-icon-long"
name="product" value="100" id="qnty_5">Suit/Jacket(s)
</p>
<p>
<button type="button" class="sub" data-
target="suits">-</button>
<input type="text" value="0" class="field_suits"
/>
<button type="button" class="add" data-
target="suits">+</button>
<p class="display_suits" name="price" max="3"
min="1">₦ 0</p>
</p>
</div>
</div>
<div class="third-booking-container">
<p>Total:₦ <span id="totalValue"></span></p>
<button>Set pick up date
<FontAwesomeIcon class="second-container-button-right"
icon="angle-right" /></button>
</div>
</div>
var subElm = document.querySelectorAll('.sub');
var addElm = document.querySelectorAll('.add');
var totalValueElm = document.getElementById('totalValue');
for (var i = 0; i < subElm.length; i++) {
subElm[i].addEventListener('click', function () {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' + targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
if (currentValue !== 0) {
var incValue = currentValue - 1;
var strValue = ' ' + incValue;
inputElm.setAttribute('value', incValue);
// displayElm.innerHTML = "₦" + strValue;
displayElm.innerHTML = "₦ " + incValue * 100;
totalValueElm.innerText = Number(totalValueElm.innerText) -
100;
}
});
addElm[i].addEventListener('click', function () {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' + targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
var incValue = currentValue + 1;
var strValue = ' ' + incValue;
inputElm.setAttribute('value', incValue);
// displayElm.innerHTML = "₦" + strValue;
displayElm.innerHTML = "₦ " + incValue * 100;
totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
});
}
<div class="summaryContainer">
<div class="summaryNavBar"><p
className="summaryTitle">Summary</p></div>
<div class="summaryContent">
<p class="total" id="total">Total:</p>
<p class="sum">₦0.00</p>
</div>
<div class="summaryCard">
<div class="summary-card-title">
<div>Item</div>
<div>Quantity</div>
</div>
<div class="summary-card-content">
<div >Shirt(s)</div><div id="
first" class="summary-quantity"><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>
<div class="summary-card-content">
<div>Trouser(s)</div>
<div class="summary-quantity" id="second">
<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>
<div class="summary-card-content" id="third">
I want the total calculation of price on the booking page to also appear at the summary page when I automatically click on summary page
In your booking page, store the total price in local storage using localStorage.setItem().
localStorage.setItem('totalPrice', JSON.stringify(totalValue));
In your summary page, access this total price using localStorage.getItem().
var totalPrice = JSON.parse(localStorage.getItem('totalPrice'));
Note that all the values are stored as strings, so you have to use JSON.parse() to convert the string back to the object or value.
how do i grab a value from an input element in javascript? For some reason my code is not executing. This is my HTML code:
<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
This is my javascript code:
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<input class="jenny" placeholder="Your First Name"/>
<br /><br />
<button onclick='buttonClicked();'>Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<script>
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}
document.getElementById('get').onclick = buttonClicked;
</script>
I tried your code on the editor. It works fine. But you must include your JS code inside a <script> element. And put it in the bottom of the document.
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<section id ="my-life">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get" onclick="buttonClicked()">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<br/>
</section>
I am trying to create a touchscreen calculator like where the button value will be placed on the textbox after i set it on a focus by clicking but it appears on all the textboxes.I tried to use the code
if ($(impo).is(":focus")) {
but it doesnt work. Please see my snippet
Thanks in advance!
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
document.getElementById('tess').onclick = function() {
document.getElementById('tess_text').focus();
}
document.getElementById('imp').onclick = function() {
document.getElementById('imp_text').focus();
}
function NumPressed(Num) {
if (impo) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.ReadOut.value == " ")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
if (tess) {
if (FlagNewNum) {
FKeyPad.readtess.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.readtess.value == " ")
FKeyPad.readtess.value = Num;
else
FKeyPad.readtess.value += Num;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=" "> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value=" ">
<br>
<input type="button" value=" 1" onclick="NumPressed(1)" />
<input type="button" value=" 2" onclick="NumPressed(2)" />
<input type="button" value=" 3" onclick="NumPressed(3)" /> <br>
</form>
</body>
</html>
if (impo) and if (tess) just tests whether the element exists, which they do, so the value gets written to both of them because they both exist. In a desktop environment, you can't do what you're asking - you can give a textbox the focus, but once the user clicks on one of the buttons in order to select that number, the textbox no longer has the focus (because the button has it).
You need a separate way to maintain which textbox is currently selected, something like the snippet below. It will update the currently "selected" element both on the click of the Imp/Tes buttons and whenever either of the textbox gains focus (e.g. by mouse click or touch).
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var current_input = impo;
impo.onfocus = function() {
current_input = impo;
}
tess.onfocus = function() {
current_input = tess;
}
document.getElementById('tess').onclick = function() {
current_input = tess;
tess.focus();
}
document.getElementById('imp').onclick = function() {
current_input = impo;
impo.focus();
}
function NumPressed(Num) {
current_input.value += Num;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=""> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value="">
<br>
<br>
<input type="button" value="1" onclick="NumPressed(this.value)" />
<input type="button" value="2" onclick="NumPressed(this.value)" />
<input type="button" value="3" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="4" onclick="NumPressed(this.value)" />
<input type="button" value="5" onclick="NumPressed(this.value)" />
<input type="button" value="6" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="7" onclick="NumPressed(this.value)" />
<input type="button" value="8" onclick="NumPressed(this.value)" />
<input type="button" value="9" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="0" onclick="NumPressed(this.value)" /> <br>
</form>
</body>
</html>
I am looking to build a simple webpage that can check to see if a string contains certain information. I'm taking a summer course in Java and wanted to give Javascript a try. Maybe a bad idea?
I want the user to enter information - name, phone number, and a couple other options in a form. Then I want the user to enter more information in the text area. The text area will reference the input data and if there is a match it will alert the user.
I have limited javascript experience, but I've been able to manipulate user input with javascript in the past.
Not sure what my problem here is. Any tips (especially regarding style and logic) are greatly appreciated! PS - I'm using Bootstrap if that matters...
Thanks in advance :)
HTML
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="GetInput();Check();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
JS
GetInput()
{
var tNameValue = document.getElementById("Name").value;
var tValue = document.getElementById("Number").value;
var tArray = document.getElementById('LongText').value.split('\n');
}
Check( tArray, tNameValue, tValue )
{
for(var i = 0; i < tArray.length; i++ )
{
if( i === tNameVaue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match" <br />;
}
if( i === tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match" <br />;
}
}
}
*
Your javascript has many things wrong. Here is the HTML and the Javascript. The logic must be improved but the code is working.
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="ExecuteAll();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
And here is the Javascript:
var tNameValue;
var tValue;
var tArray;
function ExecuteAll()
{
GetInput();
Check();
}
function GetInput()
{
tNameValue = document.getElementById("Name").value;
tValue = document.getElementById("Number").value;
tArray = document.getElementById('LongText').value.split('\n');
}
function Check()
{
if (tArray != null) {
for(var i = 0; i < tArray.length; i++ )
{
if( i == tNameValue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match <br />";
}
if( i == tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match <br />";
}
}
}
}
I will tell you what I did to fix the bugs:
Added function keyword to the javascript functions.
Put the variables as global so they can be used for the whole code.
Verified whether tArray is not null.
Fixed variable names.
Here is the Fiddle code: http://jsfiddle.net/3U6mE/6/
I hope it helps you get started.
I'm trying to sum the value of an input text changing dynamically with a radio that also changes dynamically. I'm doing something right but also something wrong because it doesn't sum when I want. The sum should show everytime the input text changes and not randomly disappear then you click a radio, just sum them.
the fiddle http://jsfiddle.net/7tFhx/
and the code
<form id="myForm" accept-charset="UTF-8">
<button type="button" class="btn-tt btn-primary btn-lg" disabled>1. Elige el color</button></br>
<label>
<input class="calc" id="fb1" type="radio" name="fb" value="10">
<img src="img/01.jpg"/>
</label>
<label>
<input class="calc" id="fb2" type="radio" name="fb" value="15">
<img src="img/02.jpg"/>
</label>
</br>
</br>
<button type="button" class="btn-tt btn-primary btn-lg" disabled>2. Elige las medidas</button></br>
<div class="row">
<div class="col-xs-2">
ancho (cm.)
<input id="ancho" type="text" class="form-control" placeholder="100">
</div>
<div class="col-xs-2">
alto (cm.)
<input id="alto" type="text" class="form-control" placeholder="100">
</div>
<div class="col-xs-2">
cantidad
<input id="cantidad" type="text" class="form-control" placeholder="1">
</div>
</div>
</br>
<button type="button" class="btn-tt btn-primary btn-lg" disabled>3. Posición mecanismo</button></br>
<label>
<input class="calc" id="fb3" type="radio" name="fb1" value="20">
<img src="img/01.jpg"/>
</label>
<label>
<input class="calc" id="fb4" type="radio" name="fb1" value="35">
<img src="img/02.jpg"/>
</label>
<div>
Total: <span id="price">0</span>€
</div>
</form>
js:
$(function(){
var mecanismoMedida = ['100','200'];
var mecanismoPrecio = ['50','80'];
$('#ancho').on('input',function(){
var j = 1, i = 0;
value = parseInt(($("#ancho").val() / 8) + 1);
for(i = 0; i < mecanismoMedida.length; i++){
if($("#ancho").val() >= mecanismoMedida[i] && $("#ancho").val() <
mecanismoMedida[j]){
value += mecanismoPrecio[i];
break;
} else {
j++;
}
}
$("#price").text(this.value + value);
});
$('#myForm input[type="radio"]').on('change', function () {
var sum = 0;
$("#myForm").find("input[type='radio']:checked").each(function () {
sum += parseInt(this.value);
});
$("#price").text(sum);
});
});
If it's a simple sum you're after, you can simply run an update code on the keyup and change events of all input elements:
$("input").change(function(){update();}).keyup(function(){update();});
To update them, first you need to check and see which one of the two radio buttons are checked and get its value:
function update(){
var p = 0;
for(var i = 0; i < $(".calc").val(); i++)
{
if($($(".calc")[i]).prop("checked") == true)
{
p += parseInt($($(".calc")[i]).val());
}
}
After that, simply parse the values of the textboxes to integers and add them to the value of the radio button. I created a custom function to do this, because if the boxes are empty, parsing them returns NaN:
p = parseInt(p);
p += parseInt(val2($("#ancho")));
p += parseInt(val2($("#alto")));
p += parseInt(val2($("#cantidad")));
p = parseInt(p);
$("#price").html(p);
}
function val2(elm){
if(isNaN(parseInt($(elm).val())))
return 0;
else
return parseInt($(elm).val());
}
JSFiddle