Unable to read value of dom element after populating it by Javascript

Unable to read value of dom element after populating it by Javascript - javascript

I have 2 javascript functions. One writes two values on the page and the second tries to read those values. The problem is that the second function is not able to read those values - it says "undefined".
the functions are:
<html>
<body onload="generate()">
<p>
<a type="number" id="first"></a>
<a>+</a>
<a type="number" id="second"></a>
<a>=</a>
<input type="number" id="result"></input>
<button id="submit" onclick="dosome()">Submit</button>
<p id="super"></p>
<script>
var press_flag ="no";
var press_flag ="no";
function generate()
{
var x = Math.round(Math.random()*100);
var y = Math.round(Math.random()*100);
document.getElementById("first").innerHTML = x;
document.getElementById("second").innerHTML = y;
var result = document.getElementById("result").value;
setTimeout(function () {
alert(press_flag);
if (press_flag == "yes")
{}
else
{
document.getElementById("submit").disabled = true;
var result = x+y;
document.getElementById("super").innerHTML = result;
}
}, 7000);
}
function dosome()
{
press_flag= "yes";
alert(document.getElementById("first").value);
var a = document.getElementById("first").value;
var b = document.getElementById("second").value;
var c = document.getElementById("result").value;
var resultfinal = Number(a) + Number(b);
if (c==resultfinal)
{
document.getElementById("super").innerHTML = "Superb my boy!";
}
}
</script>
</body>
</html>

It works for me,you can check it:
<!DOCTYPE html>
<html>
<body>
first:<br>
<input type="text" name="firstname" id="first"><br>
second:<br>
<input type="text" name="lastname" id="second">
<input type="text" value="result" id="result">
<input type="text" id="super">
<input type="submit" value="submit" id="submit" onclick="generate()">
<input type="submit" onclick="dosome()">
</body>
</html>
<script>
var press_flag ="no";
function generate()
{
var x = Math.round(Math.random()*100);
var y = Math.round(Math.random()*100);
document.getElementById("first").innerHTML = x;
document.getElementById("second").innerHTML = y;
var result = document.getElementById("result").value;
setTimeout(function () {
alert(press_flag);
if (press_flag == "yes")
{}
else
{
document.getElementById("submit").disabled = true;
var result = x+y;
document.getElementById("super").innerHTML = result;
}
}, 7000);
}
function dosome()
{
press_flag= "yes";
alert(document.getElementById("first").value);
var a = document.getElementById("first").value;
var b = document.getElementById("second").value;
var c = document.getElementById("result").value;
var resultfinal = Number(a) + Number(b);
if (c==resultfinal)
{
document.getElementById("super").innerHTML = "Superb my boy!";
}
}
</script>
It does not show any undefined.

Related

Can't convert a array or object into a JSON string for Session Storage

I've been trying to store an object that I created into the location storage using JSON.stringify and JSON.parse but something is going wrong. All the comments are my past tries. Every time that I try to store the elements, the is an error in my if statement in the loader() function that states "Cannot read property '0' of null" leading my to assume the array is empty.
function initial() {
if (localStorage.getItem("run") == null) {
/*
var form = document.getElementById("myForm");
var idObject = {};
idObject[form.elements[0].id].("false");
for(var i = 1; i < form.length ; i++){
idObject[form.elements[i].id].push("false");
}
sessionStorage.setItem("savedIds",JSON.stringify(idObject));
*/
/*
var ids = [
{area:"kitchen",done:"true"},
{area:"livingroom",done:"false"},
{area:"bathroom",done:"false"},
{area:"dining",done:"false"},
{area:"bredroom",done:"false"}
];
*/
/*
var ids = {
"kitchen":true,
"livingroom":false,
"bathroom":false,
"dining":false,
"bedroom":false};
*/
var ids = ["false", "false", "false", "false", "false"];
sessionStorage.setItem("savedIds", JSON.stringify(ids));
localStorage.setItem("run", true);
}
}
function loader() {
var form = document.getElementById("myForm");
var obj = JSON.parse(sessionStorage.getItem("savedIds"));
for (var i = 0; i < 5; i++) {
if (obj[i] == "false") {
document.getElementById(form.elements[i].id).style.backgroundColor = "red";
return false;
} else {
document.getElementById(form.elements[i].id).style.backgroundColor = "green";
return false;
}
}
}
EDIT 1:
function start(){
initial();
loader();
// complete();
}
<body onload="start()">
<header align=center>Home Screen</header>
<p align=center id="result"></p>
<script>
document.getElementById("result").innerHTML = sessionStorage.getItem("currentAddress");
</script>
<ul align=center>
<form id="myForm">
<input type="button" name="area" id="kitchen" value="Kitchen">
<script type="text/javascript">
document.getElementById("kitchen").onclick = function () {
location.href = "http://localhost:8080/Project/kitchen.html";
};
</script>
<input type="button" name="area" id="livingroom" value="Livingroom" >
<script type="text/javascript">
document.getElementById("livingroom").onclick = function () {
location.href = "http://localhost:8080/Project/livingroom.html";
};
</script>
<input type="button" name="area" id="bathroom" value="Bathroom" >
<script type="text/javascript">
document.getElementById("bathroom").onclick = function () {
location.href = "http://localhost:8080/Project/bathroom.html";
};
</script>
<input type="button" name="area" id="dining" value="Dining" >
<script type="text/javascript">
document.getElementById("dining").onclick = function () {
location.href = "http://localhost:8080/Project/dining.html";
};
</script>
<input type="button" name="area" id="bedroom1" value="Bedroom 1" >
<script type="text/javascript">
document.getElementById("bedroom1").onclick = function () {
location.href = "http://localhost:8080/Project/bedroom1.html";
};
</script>
<input type="button" name="area" id="send" value="Complete?" style="display: none";>
<script type="text/javascript">
document.getElementById("bedroom1").onclick = function () {
location.href = "http://localhost:8080/Project/sendinfo.html";
};
</script>
</form>

How to create a link from button values for woocommerce order

I have to generate a add to cart link for a page from value inputed by our customer. For example, the customer wants to order 3 products from our site www.example.com, so the code generates a link to add these 3 product to cart on page www.example2.com/?add-to-cart=25&quantity=3″.
Any ideas? I would be very grateful.
Here is the qet quantity code which works like a charm.
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
var i = 0;
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>

Here is a code sample which I wrote for you which does the job:
JSBIN Snippet Link: https://jsbin.com/guborazuqu
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
var i = 0;
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if (el.value == 1) return false;
el.value = Number(el.value) - 1;
}
function generateAddToCartLink() {
var productID = document.getElementById('productID').value;
var quantity = document.getElementById('gumb2').value;
var generatedLink = `${location.protocol}//${location.hostname}/?add-to-cart=${productID}&quantity=${quantity}`;
window.location.href = generatedLink;
}
<button class="plus" onclick="buttonClickUP();">+</button>
<input id="productID" type="text" value="25">
<input id="gumb2" type="text" value="1">
<button class="plus" onclick="buttonClickDOWN();">-</button>
<button id="order" onclick="generateAddToCartLink()">ORDER NOW</button>

when checkbox is checked it calculate the price but the issue it not appear in confirm

function fuelPrice()
{
var fuelPrice=0;
var theForm = document.forms["price"];
var withFuelPrice = document.getElementsByClassName("ful");
if(withFuelPrice.checked==true)
{
fuelPrice=30;
}
return fuelPrice;
}
function withPol()
{
var polishPrice=0;
var theForm = document.forms["price"];
var includeInscription = document.getElementsByClassName("pol");
if(includeInscription.checked==true){
polishPrice=50;
}
return polishPrice;
}
function driver()
{
var driverPrice=0;
var theForm = document.forms["price"];
var getDriv = document.getElementsByClassName("drv");
if(getDriv.checked==true){
driverPrice=50;
}
return driverPrice;
}
function calculateTotal()
{
var car1= 50
var total = fuelPrice() + withPol() + car1 + driver();
var text = "Total Price For the Renting "+total+ "BHD/Week";
//display the result
var divobj = document.getElementsByClassName('totalPrice');
divobj.style.display='block';
divobj.innerHTML = text;
return text;
}
function myFunction()
{
var name = calculateTotal()
confirm(name)
}
<form class="price"><p class="totalPrice booktxt">Total Price For the Renting 50BHD/Week<br> </p>
<input onclick="calculateTotal() " type="checkbox" class="ful">With Fuel<br>
<input onclick="calculateTotal() " type="checkbox" class="pol">Polishing 2 weeks<br>
<input onclick="calculateTotal() " type="checkbox" class="drv">Driver<br>
</form>
<button class="btn1" onclick="myFunction()">Add to cart</button>
I am having some issues to make the price appear in confirm so the user sees the price and confirm its ok or not when i click it show a blank popup. Also, can I know my mistake to avoid it in the future

You have to return something to show in that confirm box.
function fuelPrice() {
var fuelPrice = 0;
var theForm = document.forms["price"];
var withFuelPrice = theForm.elements["ful"];
if (withFuelPrice.checked == true) {
fuelPrice = 30;
}
return fuelPrice;
}
function withPol() {
var polishPrice = 0;
var theForm = document.forms["price"];
var includeInscription = theForm.elements["pol"];
if (includeInscription.checked == true) {
polishPrice = 50;
}
return polishPrice;
}
function driver() {
var driverPrice = 0;
var theForm = document.forms["price"];
var getDriv = theForm.elements["drv"];
if (getDriv.checked == true) {
driverPrice = 50;
}
return driverPrice;
}
function calculateTotal() {
var car1 = 50
var total = fuelPrice() + withPol() + car1 + driver();
var text = "Total Price For the Renting " + total + "BHD/Week"; // Store text in local variable
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = text;
return text; // Return text
}
function myFunction() {
var name = calculateTotal()
confirm(name) // Now it shows text from calculateTotal function
}
<form id="price">
<p id="totalPrice" class="booktxt">Total Price For the Renting 50BHD/Week<br> </p>
<input onclick="calculateTotal() " type="checkbox" id="ful">With Fuel<br>
<input onclick="calculateTotal() " type="checkbox" id="pol">Polishing 2 weeks<br>
<input onclick="calculateTotal() " type="checkbox" id="drv">Driver<br>
</form>
<button class="btn1" onclick="myFunction()">Add to cart</button>

Just add a return value to calculateTotal function. Like the following
return divobj.innerHTML;
Full function looks as follows:
function calculateTotal()
{
var car1= 50
var total = fuelPrice() + withPol() + car1 + driver();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Renting "+total+ "BHD/Week";
return divobj.innerHTML;
}

javascript Uncaught TypeError: .indexOf is not a function

This is the javascript code:
/**
* Created by Alejandro on 25/02/2016.
*/
var aantalKoppels = 2;
function setup(){
var btnToevoegen = document.getElementById("btnToevoegen");
btnToevoegen.addEventListener("click", koppelToevoegen);
var btnReplace = document.getElementById("btnReplace");
btnReplace.addEventListener("click", update);
}
function koppelToevoegen() {
var parameterDataKoppel = document.createElement("div");
var labelParameter = document.createElement("label");
labelParameter.innerHTML = "Parameter:";
labelParameter.setAttribute("for", "parameter" + aantalKoppels);
var parameter = document.createElement("input");
parameter.id = "parameter" + aantalKoppels;
parameter.setAttribute("type", "text");
var labelData = document.createElement("label");
labelData.innerHTML = "Data:";
labelData.setAttribute("for", "data" + aantalKoppels);
var data = document.createElement("input");
data.id = "data" + aantalKoppels;
data.setAttribute("type", "text");
parameterDataKoppel.appendChild(labelParameter);
parameterDataKoppel.appendChild(parameter);
parameterDataKoppel.appendChild(labelData);
parameterDataKoppel.appendChild(data);
var parameterDataKoppels = document.getElementById("parameterDataKoppels");
parameterDataKoppels.appendChild(parameterDataKoppel);
aantalKoppels++;
}
function update() {
var parameterDataKoppels = [];
var rangnummerKoppel = 1;
for(var i = 0; i < aantalKoppels - 1; i++) {
var parameter = (document.getElementById("parameter" + rangnummerKoppel)).value;
var data = (document.getElementById("data" + rangnummerKoppel)).value;
parameterDataKoppels[i] = [parameter.trim(), data.trim()];
rangnummerKoppel++;
}
var template = document.getElementById("template");
vervangAlles(template, parameterDataKoppels);
}
function vervangAlles(template, parameterDataKoppels) {
for(var i = 0; i < parameterDataKoppels.length; i++) {
var result = vervang(template, parameterDataKoppels[i][0], parameterDataKoppels[i][1]);
template = result;
}
var output = document.getElementById("txtOutput");
output.innerHTML = template;
return template;
}
function vervang(template, parameter, data) {
var result = template.substring(0, template.indexOf(parameter)) + data;
var i = template.indexOf(parameter) + parameter.length;
while(template.indexOf(parameter, i) !== -1) {
var indexVolgende = template.indexOf(parameter, i);
result += (template.substring(i, indexVolgende)) + data;
i = indexVolgende + parameter.length;
}
result += template.substring(i, template.length);
return result;
}
window.addEventListener("load",setup,false);
This code should take a template (String), parameters (String word out of text) and data (String) as input to then replace al the parameters in the text by the String data. I do get an error which I can't figure out at the first line in the last function:
Uncaught TypeError: template.indexOf is not a functionvervang # ReplaceFunction.js:61vervangAlles # ReplaceFunction.js:52update # ReplaceFunction.js:47
this is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="../scripts/ReplaceFunction.js"></script>
<title>ReplaceFunction</title>
</head>
<body>
<div>
<label for="template">Template:</label>
<input id="template" type="text" />
</div>
<div id="parameterDataKoppels">
<div>
<label for="parameter1">Parameter:</label>
<input id="parameter1" type="text" />
<label for="data1">Data:</label>
<input id="data1" type="text" />
</div>
</div>
<input id="btnToevoegen" type="button" value="Koppel toevoegen" />
<input id="btnReplace" type="button" value="Replace" />
<p id="txtOutput">geen output</p>
</body>
</html>
I hope somebody knows why I get this error.

It seems like your 'update' should be
function update() {
var parameterDataKoppels = [];
var rangnummerKoppel = 1;
for(var i = 0; i < aantalKoppels - 1; i++) {
var parameter = (document.getElementById("parameter" + rangnummerKoppel)).value;
var data = (document.getElementById("data" + rangnummerKoppel)).value;
parameterDataKoppels[i] = [parameter.trim(), data.trim()];
rangnummerKoppel++;
}
//var template = document.getElementById("template");
var template = document.getElementById("template").value;
vervangAlles(template, parameterDataKoppels);
}

Javascript flow control glitch

UPDATE: SOLVED! line 116 (ERROR3) had to be changed from 'parseInst(rom[i]); ' to 'rom[i]; '.
I'm working on an assembly simulator in Javascript. For some reason the JUMP instruction messes up the register contents. The following program (can be copy-pasted) increments register 'A' (0-->1) then jumps to instruction 0. Instead of '1', the register's content becomes a value over 5000. What am I doing wrong? UPDATE: added three errors caught by the debugger ("Uncaught RangeError: Maximum call stack size exceeded").
var regA = 0;
var regB = 0;
var accu = 0;
var rom = [];
var instCount = 0;
var flag1 = 0;
var stopState = 0;
function eval() {
var inst = document.getElementById("text_f").value;
parseInst(inst);
};
function parseInst(instString) {
if (instString.includes("LDA")) { //ERROR1
var strSplitA = instString.split(":");
regA = parseInt(strSplitA[1]);
document.getElementById("regA").innerHTML = regA;
instCount++;
document.getElementById("demo").innerHTML = "load register A: " + strSplitA[1]+"type of: "+typeof regA;
} else if (instString.includes("LDB")) {
var strSplitB = instString.split(":");
document.getElementById("demo").innerHTML = "load register B: " + strSplitB[1];
regB = parseInt(strSplitB[1]);
document.getElementById("regB").innerHTML = regB;
instCount++;
} else if (instString == "ADD") {
accu = regA + regB;
document.getElementById("demo").innerHTML = "add " + regA + "+" + regB + "=" + accu;
document.getElementById("accu").innerHTML = accu;
instCount++;
} else if (instString.includes("JMP")) {
var jumpTo = instString.split(":");
instCount = parseInt(jumpTo[1]);
document.getElementById("demo").innerHTML = "jump to: " + instCount+" typeof: "+typeof instCount;
document.getElementById("count").innerHTML = instCount;
runStop(stopState,parseInt(jumpTo[1])); //ERROR2
} else if (instString == "CMP") {
if (regA === regB) {
flag1 = 1;
instCount++;
document.getElementById("flag1").innerHTML = 1;
document.getElementById("demo").innerHTML = "flag1 set to 1";
} else {
flag1 = 0;
instCount++;
document.getElementById("flag1").innerHTML = 0;
document.getElementById("demo").innerHTML = "flag1 set to 0";
};
} else if (instString.includes("INC")) {
var incRegister = instString.split(":");
switch (incRegister[1]) {
case "A":
regA++;
document.getElementById("demo").innerHTML = "case A";
document.getElementById("regA").innerHTML = regA;
instCount++;
break;
case "B":
regB++;
document.getElementById("demo").innerHTML = "case B";
document.getElementById("regB").innerHTML = regB;
instCount++;
break;
default:
document.getElementById("demo").innerHTML = "error: register name";
break;
}
} else {
document.getElementById("demo").innerHTML = "error: no instruction";
};
};
function saveToRom() {
var romString = document.getElementById("text_f").value;
rom = romString.split(",");
document.getElementById("rom").innerHTML = rom;
document.getElementById("demo").innerHTML = "#debug:save to rom";
reset();
};
function step() {
parseInst(rom[instCount]);
document.getElementById("count").innerHTML = instCount-1;
};
function run() {
stopState = 0;
document.getElementById("demo").innerHTML = "run";
runStop(stopState,instCount);
};
function stop(){
stopState = 1;
document.getElementById("demo").innerHTML = "stop";
runStop(stopState,instCount);
};
function runStop(stopSt,instructionCount){
if(stopSt == 0){
for(var i=instructionCount;i<rom.length;i++){
parseInst(rom[i]); //ERROR3
document.getElementById("demo").innerHTML = "#runStop(): stopState: "+stopState+" for loop length: " + rom.length;
}
} else {
document.getElementById("demo").innerHTML = "#runStop(): stopState: "+stopState;
};
};
function reset() {
document.getElementById("demo").innerHTML = "debug: reset";
regA = 0;
regB = 0;
accu = 0;
flag1 = 0;
instCount = 0;
document.getElementById("regA").innerHTML = regA;
document.getElementById("regB").innerHTML = regB;
document.getElementById("accu").innerHTML = accu;
document.getElementById("count").innerHTML = instCount;
document.getElementById("flag1").innerHTML = flag1;
};
The full source code with HTML on Github.
I appreciate your help in advance! EDIT: The html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>COMPU</title>
<script type='text/javascript' src='comp3.1.js'></script>
<link rel="stylesheet" type="text/css" href="stylesheet_comp.css">
</head>
<body>
<input type="text" id="text_f" value=" " autofocus>
<br><br>
<div class="nav">
<button onclick="eval()">EXEC</button>
<button onclick="saveToRom()">SAVE</button>
<button onclick="reset()">RST</button>
<button onclick="step()">STEP</button>
<button onclick="run()">RUN</button>
<button id="stop" value=0 onclick="stop()">STOP</button>
</div>
<br>
<div class="displays">
DEBUG:
<p id="demo">*debugging messages*</p>
REG A:
<p id="regA">0</p>
REG B:
<p id="regB">0</p>
ACCU:
<p id="accu">0</p>
<br> ROM:
<p id="rom"></p>
INS COUNT:
<p id="count">0</p>
FLAG1:
<p id="flag1">0</p>
<!--
DEBUG2:
<p id="dbg2"></p>
-->
</div>
INSTRUCTIONS:
<ol>
<li>ADD</li>
</ol>
</body>
</html>

UPDATE: SOLVED! line 116 (ERROR3) had to be changed from 'parseInst(rom[i]); ' to 'rom[i]; '.

Develop Reference

JavaScript is the programming language of the Web.

Unable to read value of dom element after populating it by Javascript - javascript

Related

Can't convert a array or object into a JSON string for Session Storage

How to create a link from button values for woocommerce order

when checkbox is checked it calculate the price but the issue it not appear in confirm

javascript Uncaught TypeError: .indexOf is not a function

Javascript flow control glitch

Categories

Resources