when you say new it should add the item you enter to the todo list and when I call list it should give me the list but the quit works and it quits the program if you have any advice can you please tell me how to fix this problem thank you in advance
window.setTimeout(function() {
while(true){
var rep = prompt("what ya wanna do?");
var list = [];
if(rep === "new"){
var newItem = prompt("whacha wanna add?")
list.push(newItem);
}
if(rep === "list"){
alert(list)
}
if(rep === "quit"){
break;
}
}
}, 500);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="ps3.js"></script>
</head>
<body>
<h1>Todo List</h1>
<ul>
<li>"new" - Add A Todo</li>
<li>"list" - Veiw All Todos</li>
<li>"quit" - Quit Applet</li>
</ul>
</body>
</html>
Declare variable var list = []; outside the while loop
Working example
window.setTimeout(function() {
var list = [];
while(true){
var rep = prompt("what ya wanna do?");
if(rep === "new"){
var newItem = prompt("whacha wanna add?")
list.push(newItem);
}
if(rep === "list"){
alert(list)
}
if(rep === "quit"){
break;
}
}
}, 500);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="ps3.js"></script>
</head>
<body>
<h1>Todo List</h1>
<ul>
<li>"new" - Add A Todo</li>
<li>"list" - Veiw All Todos</li>
<li>"quit" - Quit Applet</li>
</ul>
</body>
</html>
Declare list to be out of while loop
var list = [];
window.setTimeout(function() {
while(true){
var rep = prompt("what ya wanna do?");
if(rep === "new"){
var newItem = prompt("whacha wanna add?")
list.push(newItem);
}
if(rep === "list"){
alert(list)
}
if(rep === "quit"){
break;
}
}
}, 500);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="ps3.js"></script>
</head>
<body>
<h1>Todo List</h1>
<ul>
<li>"new" - Add A Todo</li>
<li>"list" - Veiw All Todos</li>
<li>"quit" - Quit Applet</li>
</ul>
</body>
</html>
Related
why doesn't it work? i just want to add a paragraph to a div. Guys, why doesn't it work? i just want to add a paragraph to a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="pobieranko.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="klasa">lalal</div>
</body>
</html>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
It appears you did not add a script tag to the page as so:
<script>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
</script>
I was following vid tutorial to create such menu. On the vid it works but NOT FOR ME.
When I click on the menu I get this msg: Uncaught TypeError: menuBtn.addEventListner is not a function.
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListner('click' , () => {
if(!menuOpen) {
menuBtn.classlist.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><CSS Hamburger Animation></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-btn"></div>
<div class="menu-btn__burger"></div>
<script src="main.js"></script>
</body>
</html>
So, I saw a video by Veritasium -> (https://youtu.be/094y1Z2wpJg)
And I wanted to try to translate it into code.
when I run it, nothing gets logged and no errors appear at all
it might be a very simple fix due to the fact that I am a VERY new programmer so yea.
if you could help that would be great! :)
var i = document.getElementById("solvebtn");
function solve() {
while(i > 1) {
//even
if(i % 2 == 0) {
(i / 2)
console.log(i)
}
//odd
else {
(i * 3 + 1)
console.log(i)
}
}
}
/* RULES */
//if odd i * 3 + 1
//if even i / 2
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3X + 1</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="Number"></input>
<button id="solvebtn" onclick="solve()">Solve</button>
</body>
</html>
You where using the wrong value, the button doesnt contain the input value, you need to get that from the input field.
var i = document.getElementById("solvebtn");
function solve() {
let value = document.getElementById("val").value;
while (value > 1) {
//even
if (value % 2 == 0) {
value = value / 2
console.log(value)
}
//odd
else {
value = value * 3 + 1
console.log(value)
}
}
}
/* RULES */
//if odd i * 3 + 1
//if even i / 2
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3X + 1</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="val" placeholder="Number"></input>
<button id="solvebtn" onclick="solve()">Solve</button>
</body>
</html>
you should change the input type to number in your HTML code
you can get the input number using element.value
const element = document.getElementById("input");
function solve() {
//this is wat you shold add
let i = element.value;
console.log(i);
while(i > 1) {
//even
console.log("ddd")
if((i % 2) === 0) {
(i /= 2)
console.log(i)
}
//odd
else {
(i =i*3 + 1)
console.log(i)
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<title>Document</title>
<script defer src="app.js"></script>
</head>
<body>
<!--change the type to number-->
<input id="input" type="number" placeholder="Number"></input>
<button id="solvebtn" onclick="solve()">Solve</button>
</body>
</body>
</html>
I have an H1 value that should decrease each time a button is clicked. The value of H1 is 10, when clicked the first time, it reduces to 9 after two seconds and when clicked again, it reduces to 8 after 2 seconds also. And it continues like that. My code below is not working as expected. It starts reducing only after the first clicks until it gets to zero. Please help me check my code below and tell me what I'm doing wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>10</h1>
<button onclick='execute()'>Start Timer</button>
</body>
<script>
let count = document.getElementsByTagName("h1")[0].innerHTML;
let btn = document.getElementsByTagName("button")[0]
function execute(){
window.setInterval(function()
{
count--;
h1 = document.getElementsByTagName("h1")[0].innerHTML = count;
if(count <= 0){
document.getElementsByTagName("h1")[0].innerHTML = 0
btn.disabled = true;
}
}, 1000);
}
</script>
</html>
You have to use setTimeout instead, because with setInterval it runs on a loop. If you want 2 seconds you have to use 2000 ms also.
Here it goes what you want:
let count = document.getElementsByTagName("h1")[0].innerHTML;
let btn = document.getElementsByTagName("button")[0]
function execute(){
window.setTimeout(function() {
count--;
h1 = document.getElementsByTagName("h1")[0].innerHTML = count;
if(count <= 0){
document.getElementsByTagName("h1")[0].innerHTML = 0
btn.disabled = true;
}
}, 2000);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>10</h1>
<button onclick='execute()'>Start Timer</button>
</body>
</html>
What's the problem I've been having recently with the editor?
I have a span
<span>123456789<span>
I selected 456 regions for segmentation and I want to achieve this effect
<span>123</span>456<span>789</span>
what should I do?
1.Select with mouse
enter image description here
2.Click bold
enter image description here
3.Split effect
enter image description here
I think I found a way! ! !
window.onload = function(){
var oBtn = document.querySelector('#btn');
oBtn.onclick = function(){
var range = getRangeAt();
console.log(range.commonAncestorContainer.parentNode.nodeName);
document.execCommand('RemoveFormat');
range = getRangeAt();
console.log(range.commonAncestorContainer.parentNode.nodeName);
}
}
function getRangeAt(win) {
var _selection, //选取对象
_range //光标对象
;
win = win || window; //获取创建光标的域
//html5得到光标的处理
if (win.getSelection) {
_selection = win.getSelection(); //获取选取对象
//当获取选取中有光标的处理
if (_selection.rangeCount) {
_range = _selection.getRangeAt(0); //返回选区的处理
}
}
//ie系列的处理，ie系列不支持win.getSelection，有自己独特的属性
else {
_selection = win.document.selection; //获取选取对象
_range = _selection.createRange(); //光标对象
}
return _range; //光标的处理
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div contenteditable="true">
<span style="font-weight:bold">Selected part</span>
</div>
<button id="btn">split</button>
</body>
</html>