I need to write a page that asks the user to enter a task, and the color that he wants the task to be having ... tried some codes but i'll show you my last try, the problem is that the color of all tasks gets updated with the new value OR it does't apply the given color at all.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Example</title>
<script type="text/javascript">
function set(){
var cont = document.getElementById("todo").value;
var color = document.getElementById("bg").value;
localStorage.setItem("task", cont);
localStorage.setItem("preferences-bgcolor", color);
//alert(localStorage.getItem('preferences-bgcolor'));
showDiv();
}
</script>
</head>
<body id="b">
<label>ADD A TASK TO YOUR TO DO LIST:</label>
</br>
Task:<input type="text" name="task" id="todo"><br>
Color:<input type="text" list="list" id="bg">
<datalist id="list">
<option value="White">
<option value="Green">
<option value="Blue">
</datalist>
<input type="submit" value="Send" onclick="set()">
<div id="content">
</div>
</body>
<script type="text/javascript">
function showDiv(){
document.getElementById("content").innerHTML+="<p style='localStorage.getItem('preferences-bgcolor')'>"+localStorage.getItem('task')+"</p></br>";
//document.getElementById("content").style.color = localStorage.getItem('preferences-bgcolor');
}
</script>
</html>
Change style='localStorage.getItem('preferences-bgcolor')' to
"<p style='" + localStorage.getItem('preferences-bgcolor') + "'>"
Related
I'm a beginner in programming and today I need your help!(please :'()
I want to create a survey,so I begin to code and a error appear and I search a lot in internet but no solution.
There are my html and js codes.
/*the code isn't finish, this error block me(code name is sur.js*/
let choi;
let choix1 = 1;
let choix2 = 1;
let choix3 = 1;
function submit(){
console.log(choi);
}
function changer(){
getElementById('survey');
choi= sel.options[sel.selectedIndex];
console.log(choi);
}
<!DOCTYPE html>
<html>
<head>
<title>Robotale v8 : surveys</title>
<link rel="icon" href="https://www.mediafire.com/convkey/a940/qp7vky5trrp8hmzzg.jpg"/>
</head>
<body style="background-color:#000000">
<br>
<a href="Index.html">
<img src="https://www.mediafire.com/convkey/6586/bb0x08ff0tvjhepzg.jpg" onclick="redirection()"/>
</a>
<br>
<font face= "Verdana" size="4" color="#3399ff">The Robotale Website is here for your Robotale time!!!</p>
<br>
<p>Surveys:</p>
<br>
<form>
<label for="survey">Your feedback about this website!!!How do you like it?</label>
<select id="survey" name="survey" type="datalist" onchange="changer();">
<datalist id="surveys">
<option value="No">Nope!!!</option>
<option value="Yes">Yes!!!</option>
<option value="liv">THIS WEBSITE IS MY LIFE IF YOU DELETE IT I WILL DIE!!!(calm down please)</option>
</datalist>
</form>
link to principal page
<br>
<br>
<input type="submit" value="Send your feedback" id="food" onclick="submit()">
<br>
<script src"sur.js"></script>
</html>
You did not specify an incomplete call to the selector - getElementById('survey');. The rule is to use the document, and you need to write like this - document.getElementById('survey');.
Next, you have an undefined variable sel, and I mean that this variable is filled with data from document.getElementById('survey');. It turned out like this - let sel = document.getElementById('survey');
Now run this code and try to select a value from the dropdown list. There are no errors.
That is how it should be?
/*the code isn't finish, this error block me(code name is sur.js*/
let choi;
let choix1 = 1;
let choix2 = 1;
let choix3 = 1;
function submit(){
console.log(choi);
}
function changer(){
let sel = document.getElementById('survey');
choi= sel.options[sel.selectedIndex];
console.log(choi);
}
<!DOCTYPE html>
<html>
<head>
<title>Robotale v8 : surveys</title>
<link rel="icon" href="https://www.mediafire.com/convkey/a940/qp7vky5trrp8hmzzg.jpg"/>
</head>
<body style="background-color:#000000">
<br>
<a href="Index.html">
<img src="https://www.mediafire.com/convkey/6586/bb0x08ff0tvjhepzg.jpg" onclick="redirection()"/>
</a>
<br>
<font face= "Verdana" size="4" color="#3399ff">The Robotale Website is here for your Robotale time!!!</p>
<br>
<p>Surveys:</p>
<br>
<form>
<label for="survey">Your feedback about this website!!!How do you like it?</label>
<select id="survey" name="survey" type="datalist" onchange="changer();">
<datalist id="surveys">
<option value="No">Nope!!!</option>
<option value="Yes">Yes!!!</option>
<option value="liv">THIS WEBSITE IS MY LIFE IF YOU DELETE IT I WILL DIE!!!(calm down please)</option>
</datalist>
</form>
link to principal page
<br>
<br>
<input type="submit" value="Send your feedback" id="food" onclick="submit()">
<br>
<script src"sur.js"></script>
</html>
Here is a short form for selecting language for a webpage, There are two languages one is marathi and another is english actually what I want is like: when a user select english language and submit the form english.html page should open and
when user select marathi language marathi.html page should open.
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<form>
<center>
<p id="p1">
Language:<select>
<option id="English" >English</option>
<option id="Marathi" >Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open" >
</center>
</form>
</html>
You can use this as a reference, considering english.html and marathi.html as your targeting pages, you can change them accordingly
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<script>
$('#button').click(function() {
var selected = $('#language option:selected');
window.location.href = selected + ".html"
})
</script>
</head>
<body>
<form>
<center>
<p id="p1">
Language:
<select id="language">
<option id="English">English</option>
<option id="Marathi">Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I think its obviously, but please do not repeat it at production:
<input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >
Here is easy way;
<select name="forma" onchange="location = this.value;">
<option value="english.html">English</option>
<option value="marathi.html">Marathi</option>
</select>
if you want to create this using simple Javascript then use location.href = "yourPageAddress";
here is the sample code i have written for the same:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript">
function MyFunction(){
var getValue = document.getElementById("language");
//console.log(getValue);
var getIndexValue = getValue.options[getValue.selectedIndex].value;
//console.log(getValue.selectedIndex);
//console.log(getIndexValue);
if(getValue.selectedIndex == 1){
//console.log("English")
location.href = "http://www.google.com";
}
else if(getValue.selectedIndex == 2){
//console.log("Marathi");
location.href = "http://www.yahoo.com";
}
else{
console.log("Wrong Option Selected.");
}
}
</script>
</head>
<body>
Language:
<select name="language" id="language">
<option>Select..</option>
<option value="https://www.google.com" id="english">English</option>
<option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>
This is just the one way where you can redirect the user to selected page, there are many different ways also to execute the same operation.
You may find some console.log statement marked comment, which was just used for debugging purpose.
I wanted to make a settings page for a Chrome Extension, but the save button doesn't work. The .click() doesn't even activate at all. I put all of my code beneath. Also, do I use the commented out button instead(see below)?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Y.A.Y | Options</title>
<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="/js/caps.js"></script>
</head>
<body>
<h1>Settings</h1>
<form>
<label>Enabled: </label>
<select id="on">
<option value="on">Yes</option>
<option value="off">No</option>
</select>
</br>
<label>First Letter:</label>
<select id="first">
<option value="on">Capital</option>
<option value="off">Lowercase</option>
</select>
</br>
<label>Change First Letter of Each </label>
<select id="per">
<option value="on">Word</option>
<option value="off">Sentence</option>
</select>
<!--<input id="save" type = "submit" value = "Save"/>!-->
<button id="yayay" type="submit">Save</button>
</form>
</body>
</html>
Javascript
var pretty_fied = false;
var isOn;
var isCapFirst;
var firstLetterPerWord;
getData()
function getData() {
chrome.storage.local.get(function (data) {
isOn = data.isOn;
isCapFirst = data.isCapFirst;
firstLetterPerWord = data.firstLetterPerWord;
})
}
$('form').on('submit', function () {
alert("HI!");
isOn = ($("#on").value == "on");
isCapFirst = ($("#first").value == "on");
firstLetterPerWord = ($("#per").value == "on");
console.log(isOn);
chrome.storage.local.set({
isOn: isOn,
isCapFirst: isCapFirst,
firstLetterPerWord: firstLetterPerWord
});
console.log("Saved");
});
In the form field you should specify the action, in other words what you are doing with the form
Eg.
<form action ='test.php' method="post"></form>
Which will send the form to a file called test.php
In the case though you will want to use jquery submit.
This is an example using the submit function in jquery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
source: http://www.w3schools.com/jquery/event_submit.asp
notice that the action part is left blank, because you do not wish to send a request to another document.
Can someone please show me STEP BY STEP about how to make the current DB data be "selected" in the dropdown? I do not know anything about JS so I'm having a hard time right now.
This is the whole js script im using. http://jsfiddle.net/bdhacker/eRv2W/
The html
<body>
<div align="center">
<hr/>
<br/>Select Country (with states):
<select id="country" name="country"></select>
<br />State:
<select name="state" id="state"></select>
<br/>
<br />Select Country (without states):
<select id="country2" name="country2"></select>
<br />
<script language="javascript">
populateCountries("country", "state");
populateCountries("country2");
</script>
<br/>
<br/>
<br />
<br />
</div>
</body>
I would create another function in JS:
function preSelect(ElementId, selected_val) {
var countryElement = document.getElementById(ElementId);
countryElement.value= selected_val;
}
Then in your code you can run the function in this order
<script language="javascript">
populateCountries("country", "state");
populateCountries("country2");
preSelect("country", "Albania"); // <-- Here you specify the country you want
</script>
Demo FIDDLE
Just assign the value to select.
document.getElementById('country').value = <db value>;
I'm trying to get a text field to appear when the user selects a certain option in a form select. I found exactly what I need at http://jsfiddle.net/0ak3b3z1/
However, when I copy this exact code into an html document, it doesn't work. Can anyone tell me where I'm going wrong.
Here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$('#industry').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val()=="SaaS");
});
</script>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
</body>
</html>
Need to include jQuery. Plus you must place the javascript at end (after DOM elements are defined).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$('#industry').on('change', function () {
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val() == "SaaS");
});
</script>
</body>
</html>
The dollar sign is used with the jquery library, and you're not including this library.
So just add jquery library before the js code.
Just Include this code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You need to include this line in your code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'> </script>