Need to click on input twice to see result - javascript

I have written a function to fetch the number of tags of a specific id on a page but need to click twice on the input in order to get the results to display. The actual filtering works on the first click but the number of results displaying only refreshes if I click the same input a second time once the page reloads. Below is the code I am using to designate the function and then call it. Any insight would be helpful.
function elementCount(){
var x = document.querySelectorAll('.box-shodow-container').length;
var y = x - 1;
document.getElementById('resource-count').innerHTML=y;
}
<input type="checkbox" onClick="elementCount()" value="Ask the Expert" name="apf" class="checkbox-primary" />

Related

Stripe checkout disabled by specific JavaScript statement on page

I have implemented Stripe's Client-Only Dashboard Checkout (https://stripe.com/docs/payments/checkout/client) on an html page. I changed the quantity value in the Stripe JS code from the integer, 1, to a variable of my choosing called numb. I made no other changes to Stripe's JS code.
If I use my own JS code to change the value of numb to an integer of my choice then when I click the Checkout button the Stripe Checkout Page has updated the quantity and total price to reflect the value of numb. This is what I want.
The problem comes when, instead of numb = 2;, I use a JS statement which allows the user of the html page to change the value of numb. Here is the section of code:
<P>How many tickets do you want to buy?</p>
<input type="number" id="steve-number-tickets">
<button id="steve-testing">How many?</button>
<p id="test-for-numb"></p>
<script>
// ***MY CODE***
numb = 7;
// User Chooses
var howManyButton = document.getElementById('steve-testing');
howManyButton.addEventListener('click', function () {
numb = 2;
// numb = document.getElementById('steve-number-tickets').value;
// document.getElementById('test-for-numb').innerHTML = numb;
});
// ***END OF MY CODE***
</script>
With the code above as it is, I get the following behaviour. If the user refreshes the page and just clicks on the Checkout button, Stripe checkout bills them for 7 items. If they refresh the page and click my How Many? button and then the Checkout button, Stripe checkout bills them for 2 items.
If I change the code so numb = 2 is commented out and comments are removed from numb = document.getElementById('steve-number-tickets').value;, then if the user refreshes the page and clicks on the Checkout button, Stripe chekout bills them for 7 items. If they refresh the page and click my How Many? button (whether or not they first enter an integer into the input element) and then click on the Stripe Checkout button, Stripe checkout fails to load.
I thought it must be a problem with the statement: numb = document.getElementById('steve-number-tickets').value;. So, I tested that by uncommenting the statement document.getElementById('test-for-numb').innerHTML = numb;. When I do that, the value the user entered in the input element is displayed in the p element with id="test-for-numb" when they click on the How Many? button. So, that statement does work as expected.
I am unable to understand why Stripe checkout fails to load when I use the statement numb = document.getElementById('steve-number-tickets').value; but does load when I use numb = 2;.
I would really like to know what is going on.
This is because the value of an input is always a string -- the type=number only affects the UI, not the value type. You just need to wrap that in parseInt() to get an actual number, which is what the Checkout API expects.

Want to edit the input date and time inside the table. But if I am typing the 1st number it suddenly get triggered

Want to edit the input date and time inside the table. But if Iam typing the 1st number it suddenly get triggered. Value should trigger after the date and time get entered.
The value will come inside the table. I need to edit the value inside the table.
For example:
function myFunction() {
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "You wrote: " + x;
}
<input type="datetime-local" id="myInput" oninput="myFunction()">
<p id="demo"> </p>
Make sure to distinguish between onkeyup and onchange correctly.
The first triggers change after pressing and releasing a key, the latter when taking focus away from input with an actual changed value.

Array printing results from data

I'm having trouble thinking of a JS function for the following idea. I want to have an array with 5 names. I also want to have a input box with a submit button. When I enter a number (1-5) I want to have it print the name that is assigned with that number from the array. Any ideas?
I have the button/input box setup but I'm not sure how the code would work.
Are you looking for something like this? JSFiddle attached https://jsfiddle.net/kgLnc6nd/
HTML
<input id='i1'/><br>
<button onclick='javascript:show()'>Click</button><br>
<div id='d1'></div>
JAVASCRIPT
var names = ['michael','henry','james','rebecca','allison'];
function show() {
var x = i1.value;
d1.innerHTML = names[x];
}

PHP form once submitted allow user input again to produce new values?

When a form is filled in and submitted and the user is taken to the .php specified in the form, and their inputs are sent over using POST and are now echoed out for the User to see their inputs, is it possible on the same page to have buttons or radio checks that can do different operations to their inputs depending on which one has been clicked?
As i gather this isn't possible to do with javascript and php as one is serverside one if browserside. And using a new form, also ajax, seem to use POST call that loses all their original values that were being echoed?
Any ideas as to if there is a solution and the best way to implement it?
An example is a calorie calculator, The users input of height, weight, etc gets submitted then the values are used to calculate the calories. So the value is echoed - but on the same page it is echoed the user can now click a button for dividing the calories into 50% carbs 40% protein 10% fats or another button 40 40 20, etc.
As I understand, your problem is - the page refreshed (or different page shown) and you want to preserve values inside input fields from previous state. You may do it as following:
<form ...>
Weight:<input name="weight" value="<?php $_REQUEST['weight']?>"/>
...
Then when you calling this page by form sumbit - it will show same values in fields.
Upd:
JavaScript simplified solution:
html:
Weight: <input type="text" id="weight" />
Calories: <input type="text" id="calories" />
Result: <span id="result"></span>
Calulate formula 1
Calulate formula 2
js part:
function calculate1(){
var w = document.getElementById('weight');
var cal = document.getElementById('calories');
document.getElementById('result').innerHTML = w / cal;
}
function calculate2(){
var w = document.getElementById('weight');
var cal = document.getElementById('calories');
document.getElementById('result').innerHTML = cal / w;
}
And of course you can style <a> as a button.

JavaScript variable not global throughout AJAX refreshes?

I'm building a really simple quiz: http://fh80.student.eda.kent.ac.uk/fyp-assets/quiz/quiz.php
At the end of the quiz it should display how many you got right e.g 5/10.
One thing about it is that each question is pulled in via AJAX so every question is a different .php file. Also, for every question there is the question page and an answer page. E.g question1.php and question1a.php
I've created a variable on the page for the score:
/* Quiz Score */
var quizScore = 0;
When you load up question1.php through AJAX, there is this script:
document.getElementById("nextQuestion1a").onclick = function(){
var correctAnswer = document.getElementById("lightningbolt");
if (correctAnswer.checked){
quizScore = quizScore+1;
}else{}};
The correct answer has an ID of lightningbolt
<input type="radio" name="question1" value="lightningbolt" id="lightningbolt">Lightning Bolt<br>
So, when this input/radio button is checked it should follow the function and +1 to quizScore;
if (correctAnswer.checked){
quizScore = quizScore+1;
I think this isn't working, because the event handler for doing this is onClick of nextQuestion(ID) - this is the same button which launches the AJAX which takes you to the next page (in this case, clicking nextQuestion1a takes you to question1a.php)
So I am thinking I need to bind it different somehow. Like not on click of that button, but just on check of the radio button.
At the end of the quiz I output the score as such:
<h3>
You got
<script>document.write(quizScore);</script>
/10
</h3>
But this doesn't output any value, not even 0 as the variable was initialised.
ETA: the variable does exist on the page at all times. The variable is not declared within the refreshed content. So the variable is always there.

Categories