Please help. I need my array to save when I goto another page. Since the page refreshes it loses the array. From here my code stops at the beginning of the store it function when I try to use sessionstorage.
Here is my attempt. The array part is just to remove the duplicate from and array and place it into array b.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Session Storage Attempt</title>
<script src="untitled-1.js" type="text/javascript"></script>
</head>
<body>
<button onClick="doIt()">Button</button>
<br>
<br>
<button onClick="storeIt()">Store It</button>
</body>
</html>
Javascript:
let a = [];
let b = [];
function doIt(){
a.push("a");
let len = a.length;
for(let i = 0; i < len; i++){
if(b.indexOf(a[i]) === -1){
b.push(a[i]);
}
}
alert(b);
}
function storeIt(){
sessionStorage.setItem('bee', JSON.stringify(b));
JSON.parse(sessionStorage.getItem('bee'));
alert(bee);
}
Related
i'm making a web application which helps people to seek what disease they have according to the symptoms.
I want to the user to click specific symptom to add in the "u_symptom_i" array and show all of the changed array elements by alert function
However, i cannot see the added element by alert function
<script>
var j = 0;
while(j < escaped_cc.length) {
document.write('<th><button id="symptom_button">' + escaped_cc[j] + '</button></th>');
document.getElementById("symptom_button").value = escaped_cc[j];
j = j + 1;
}
$("button").click(function() {
u_symptom_i.push($(this).val());
alert($(this).val());
});
</script>
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<h2>Insert Array</h2>
<input type="text" id="example" name="value">
<button id="button">Add array new item</button>
</body>
<script>
var array=[];
$("#button").click(function() {
var str = $("#example").val();
array.push(str);
alert(array);
});
</script>
</html>
Can you try this code? Adds each new value entered to an array named array and displays the records.
I am trying to figure out a way to count words that are placed in multiple paragraph blocks in javascript. Right now I have a button that is connected to a function and that function is linked to an ID in the paragraph. Here is my code
function processText(elements) {
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(/\s/).length;
}
return count;
}
var wordsInParagraphs = processText(document.getElementsByTagName("data"));
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>
<body>
<p><button 1="processText(elements);">Process</button></p>
<p id="data"></p>
</body>
Is this what you're looking for? You just need to call the function on click and grab all the elements you want to count, you have the rest there (I'm using split instead of regex).
function processText() {
var elements = document.querySelectorAll(".data");
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(" ").length;
}
console.log(count)
}
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>
<body>
<p><button onclick="processText();">Process</button></p>
<p class="data">text in paragraph one</p>
<p class="data">text in paragraph two</p>
</body>
The markup has some problems, for example, 1="processText(elements);" probably you meant onClick="processText(elements);", however, you're passing a param called elements. Further, you have a tag with id="data" and you're trying to look for tag name those elements.
A better approach is using the function addEventListener for a better logic and you should mark those paragraphs using a class name class="data". Finally, for splitting by spaces use this regex /\s+/
function processText(elements) {
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(/\s+/).length;
}
return count;
}
document.getElementById('myButton').addEventListener('click', function() {
var wordsInParagraphs = processText(document.getElementsByClassName("data"));
document.getElementById('total').textContent = wordsInParagraphs;
});
<p><button id='myButton'>Process</button></p>
<p class="data">Ele from Stack</p>
<p class="data">Ele from Venezuela</p>
<p id='total'></p>
i'm trying to save values retrieved from "onclick" and also save the values previously retrieved from "onclick" in different arrays when buttons are clicked.
but it seems like when "for loop" is used, newly retrieved values overwrite previously retrieved data even though those values are saved separately in different arrays.
i'm really confused right now, does anybody know why?
(if you hit the button "refresh", you can see the current values that are saved.)
var firstValue = [];
var preValue = [];
function returneD(a){
preValue = firstValue;
console.log("returned! preValue: "+preValue);
for (var i = 0; i < 1; i++) {
firstValue[i] = a;
console.log("returned! firstValue: "+firstValue);
}
}
function refresh1(){
console.log("preValue: "+preValue);
console.log("firstValue: "+firstValue);
}
<!DOCTYPE html>
<html>
<head>
<script src="jstest.js"></script>
</head>
<body id="thebody">
<button id="1" onclick="returneD(this.id)">O N E</button>
<button id="2" onclick="returneD(this.id)">T W O</button>
<button id="3" onclick="returneD(this.id)">T H R E E</button>
<button id="4" onclick="returneD(this.id)">F O U R</button>
<br>
<button onclick="refresh1()">refresh</button>
</body>
</html>
Please refer this code will work,
firstValue is array which already stored value after that this will assign old value to preValue array.
var firstValue = [];
var preValue = [];
function returneD(a){
preValue = a;
console.log("returned! preValue: "+preValue);
for (var i = 0; i < 1; i++) {
firstValue[i] = a;
console.log("returned! firstValue: "+firstValue);
}
}
function refresh1(){
console.log("preValue: "+preValue);
console.log("firstValue: "+firstValue);
}
<!DOCTYPE html>
<html>
<head>
<script src="jstest.js"></script>
</head>
<body id="thebody">
<button id="1" onclick="returneD(this.id)">O N E</button>
<button id="2" onclick="returneD(this.id)">T W O</button>
<button id="3" onclick="returneD(this.id)">T H R E E</button>
<button id="4" onclick="returneD(this.id)">F O U R</button>
<br>
<button onclick="refresh1()">refresh</button>
</body>
</html>
In JavaScript Arrays are just like Objects. When you assign:
preValue = firstValue; this simply takes a reference to the variable hence you fail to copy the value.
In order to achieve that, you need to copy each value of that array to the previous values array. So, you can run another for loop for first to previous assignment:
for (var i = 0; i < 1; i++) {
prevValue[i] = firstValue[i];
}
Assuming they are of the same size.
as the title said and i'm learning javascript and still a beginner.
This the Html file here :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementsByClassName("menu").innerText = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>
Since you are running Jquery you can use Jquery method. like text() or html()
But your problem, is that document.getElementsByClassName("menu") return an HTML Collection so you have to do : document.getElementsByClassName("menu")[0].innerHTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
$(".menu").text(clr({a:"a", b:"b", c:"c"}));
</script>
</body>
</html>
document.getElementsByClassName("menu") will return an Array-like NodeList of elements that contain the class menu.
Since its an Array-like object, you need to access individual elements using [].
In your case, it will be a an array of 1 element, the h1 element, so to access it you need to grab it at position 0:
document.getElementsByClassName("menu")[0].innerHTML = clr({a:"a", b:"b", c:"c"});
----------------------------------------^
I edited a couple a things. You were close.
I gave the h1 an id. And used document.getElementById.
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 id="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementById("menu").innerHTML = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>
i have a code that is supposed to read from a html file, split it into an array and display parts of that array, but when going though with alert, i found that $.get is not actually getting the file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
var info = "";
$.get("../Read_Test/text.html", function(data) {
SomeFunction(data);
});
alert(info);
var array = info.split("§n");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML = people[i] + "<br>";
}
}
function SomeFunction(data) {
var info = data;
}
</script>
</body>
</html>
the directories are on a server and go like so:
Sublinks->Read_Test->This_File.html,text.html
The objective of this is that a file would have something along the lines of "a§nb1,b2,b3,§n" and the script would split it via "§n" then get "array[1]" and split that via ",". lastly it displays each part of that newly created array on a new line, so a file with "a§nb1,b2,b3,§n" would result in:
b1
b2
b3
Please help
Ajax is asynchronous, it make request and immediately call the next instruction and not wait for the response from the ajax request. so you will need to process inside of $.get. success event.
I have changed delimiter character to ¥. change same in text.html. problem was you have not mentioned character set to utf8 and due to this it could not recognized the special character and subsequently not able to split the string. i have aldo document type to HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
$.get("../Read_Test/text.html", function(data) {
var info = data;
var array = info.split("¥");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML += people[i] + "<br>";
}
});
}
</script>
</body>
</html>