To Do list in HTML/Javascript/jQuery [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to make a to do list in Javascript / HTML5. Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do </title>
<link rel="stylesheet" href="todolist.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="To Do.js"></script>
</head>
<body>
<div id="list">
</div>
<form id="to_do_list">
<h2>What do you want to do? </h2>
<input type="text" id="task" name="task"><br>
<br/>
<button type="button" id="addToList"> Add to List </button> <br/>
</form>
</body>
</html>
I'm trying to figure out how to work Javascript that will form a list with the user's entries.
Sorry if this is easy, I am new to this.
JavaScript
window.onload = function () {
$("addToList").onclick = addTask;
}
var addTask = function() {
alert("You clicked it!");
}

You need to decide whether to use JQuery or Javascript for your script section.
It looks you have used Javascript, then switched to JQuery to reference an object then went back to Javascript. Try to stick to just one.
<script>
// this could be $(window).ready(function() { ...
window.onload = function () {
$("#addToList").click(addTask); // you need to point at the id #addToList
}
var addTask = function() {
var task = $("#task").val(); // references the value inside #task
$("#list").append("<p>"+task+"</p>") // makes a new <p> element
$("#task").val(""); // empties out #task
}
</script>
I'm not really sure what you're looking for, but this does what I think you want.
Also, I don't think you should use spaces in filenames ("To do.js")

Related

issue detecting text box contents and converting to local storage [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
// Create an event listener to save the entry when it changes
// (i.e. when the user types into the textarea)
function saveEntry() {
// TODO: Q1(c)(iii) Task 1 of 2
// Save the text entry:
// ...get the textarea element's current value
// (getting HTML input values is in Block 2 Part 2 Section 6)
document.getElementById("addTextEntry").value.addEventListener("click", localStorage);
// ...make a text item using the value
// (demonstrated elsewhere in this file)
// ...store the item in local storage using the given key
// (local storage is in Block 3 Part 5)
localStorage.setItem(key, JSON.item);
}
I can't get the text area element to store into local storage can anyone give any pointers as I am at a standstill and scratching my head.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Erehwon Diary NOTCODE123</title>
<meta name="author" content="Stephen Rice" />
<!-- Set viewport to ensure this page scales correctly on mobile devices -
->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="tma03.css" />
<!-- Set demo data -->
<script src="tma03-demo.js"></script>
<!-- Start TMA03 application -->
<script src="tma03.js"></script>
</head>
<body>
<h1>My Erehwon Diary NOTCODE123</h1>
<main>
<section id="text" class="button">
<button type="button">Add entry</button>
</section>
<section id="image" class="button">
<button type="button">Add photo</button>
<input type="file" accept="image/*" />
</section>
</main>
</body>
<script type="text/javascript">
localStorage.removeItem("")
</script>
</html>
this is the HTML if anyone needs more info please let me know I have tried some of the code people have sent and nothing is working as of yet and tank you in advance
You're setting your click event to call localStorage, but there is no localStorage function.
Without seeing your HTML I think what you're trying to do is something like this:
document.getElementById("addTextEntry").addEventListener("click", saveEntry);
function saveEntry(e) {
const addTextEntryEl = e.currentTarget.value;
// You will need to add code here to do what you want and then call your local storage below with the right parameters you're setting up here
localStorage.setItem(key, JSON.item);
}
Your event listener is a bit off. This is how you can add an event listener to a textarea (note the input event listener):
document.getElementsByClassName("add-text-entry")[0].addEventListener("input", function(event) {
console.clear();
console.log(event.target.value);
})
<textarea class="add-text-entry"></textarea>
You can simply replace the console statements with localStorage.setItem(key, value.);
Make sure you are correctly getting the value of the textbox. It should already be a string, so there is no need to process it further with JSON methods:
const value = document.getElementById("addTextEntry").value;
localStorage.setItem(key, value);
.addEventListener takes in the event type and a listener. A listener is a function. localStorage is not a function. JSON.item is also invalid.
document.getElementById("addTextEntry").addEventListener("click", function() {
var item = document.getElementById("addTextEntry").value;
localStorage.setItem(key, item);
});
You can read more about addEventListener and localStorage.

How can i transform a hashtag in a text to bold using JQuery? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to create a hashtag feature in my project but I don't know how to. I've tried many times but all to no avail.
Like for example:
I love #coding.
to be transformed to:
I love #coding using JQuery/JavaScript.
Any ideas?
#Chirs try this in your webpage
function FormatText()
{
var txt =document.getElementById("mytext").innerHTML;
var matches = txt.match(/#\w+/g);
if(matches==null)
return;
for(i=0;i<matches.length;i++)
{
txt=txt.replace(matches[i],"<b>"+ matches[i] +"</b>")
}
document.getElementById("mytext").innerHTML=txt;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body onload="FormatText();">
<div id="mytext">
I love #coding using JQuery/JavaScript on #WebPages.
</div>
</body>
</html>

How to use text option to change button URL [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Trying to create a dynamic donation button using input text. Essentially, enter the amount to donate and click the button. The amount entered should be updating the button URL but nothing happens. I'm sure I am missing something obvious but none of the available solutions here have worked (I tried 7). Thanks.
document.getElementById("input-custom-donation").onchange = function() {
document.getElementById("donate-button").href = "https://securepayments.cardpointe.com/pay?details=Donation|30|"+this.value+";
}
<label for="input-custom-donation">Enter Custom Donation Amount (numbers only):</label>
<input id="input-custom-donation" type="text" name="input-custom-donation">
<br>
<br>
<a class="button" id="donate-button" href="http://test/">Donate Now</a>
There's a typo, an exceeding double quote at the end.
document.getElementById("donate-button").href = "https://securepayments.cardpointe.com/pay?details=Donation|30|" + this.value;
Just as a reminder, you can always use string interpolations to make string more readable, here's an example:
document.getElementById("donate-button").href = `https://securepayments.cardpointe.com/pay?details=Donation|30|${this.value}`
use href to set link of anchor tag
let btn = document.getElementById("donate-btn");
let amount = document.getElementById("value");
let link = document.getElementById("link");
const baseLink="www.google.com/donate?amount="
const makeLink=(amount)=>{
return baseLink+amount
}
function amountChange(e) {
btn.innerText = `Donate Me ${amount.value}$`
link.href=makeLink(amount.value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input onchange={amountChange()} id="value" type="number" />
<button id="donate-btn"> Donate Me </button>
<a id="link" href="www.google.com/donate?amount=0" > Link To Donate </a>
</body>
</html>

HTML or JAVA Script for my random page viewer [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Hi Everyone
Please help me on getting html code or javascript.
I'm really new on to this thing. I just wanted to have a page generator to generate a random page on our company website.
where you will be click a link then it will redirect you on a random page on your website.
our company url pages will be like this.
http://www.company.com/pages/xxxx.pdf
Where if i click on get random page, it will go on 1123.pdf .. pages will be random from 1xxxx to 3xxxx.
i would like to make it simple and should be on one page.
Thanks! :D
Here you go. I've added comments to the code that explain how everything works.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Open random url</title>
<script type="text/javascript">
/* Function to generate random number */
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
/* Wait untill the document is fully loaded */
document.addEventListener('DOMContentLoaded', function(){
/* Catch click event on hyperlink */
document.getElementById("randomLink").addEventListener("click", function(event){
/* Prevent the browser from following the hyperlink */
event.preventDefault();
/* Generate random number between 1000 and 4000 */
var randomNumber = randomIntFromInterval(1000, 4000);
/* Redirect to a random PDF file on the website */
window.location.href = "http://www.company.com/pages/"+ randomNumber +".pdf";
});
});
</script>
</head>
<body>
Open random PDF
</body>
</html>

calling javascript function from body of html [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a javascrip[t function that is saved in a file (test.js). I want to call the function from within the body of the html file
something like
<script>
load drawLogo("text" val1, val2, val3);
</script>
(since this function will be called on different pages with different values)
Right now I am having to put that call at the bottom of the main function drawLogo() which means I can't customize it.
<script src="text.js" type="text/javascript"></script>
if it is in same function then make it like:-
onclick="func()" or onmmousehover="func()"
define function func() in the same file within script tag
Just put the function name and the parameters that receive this, dont forget first call the js file:
test.js:
function drawLogo(paramText,value1,value2,value3){
//Do something
}
html:
<head>
<script src="test.js" type="text/javascript"></script>
<!--you can put this in the head or in the body-->
<script>
drawLogo("some","value","for","example");
</script>
</head>
<body>
<!--you can put this in the head or in the body-->
<script>
drawLogo("some","value","for","example");
</script>
</body>

Categories