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>
Related
This question already has answers here:
For loop for HTMLCollection elements
(13 answers)
Closed 8 months ago.
I have a small menu of 5 items here. What I am trying to do is if the "lollipops" option is selected and a user clicks add to cart button, JavaScript should create a new tag. I am new to JavaScript and would appreciate any directions or suggestions about what I am doing wrong. I posted a copy of my HTML and JavaScript code below, so please take a look thanks.
<!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>Assignment 2</title>
</head>
<body>
<form>
<div class="container">
<div class="material">
<label for="items">Choose an Item: </label>
<select id="items">
<option id="lollipops">Box of Lollipops - $2.00</option>
<option id="recipes">Book of Recipes - $4.99</option>
<option id="giftwrap">Gift wrapper - $2.75</option>
<option id="dogTreats">Dog Treats - $5.00</option>
<option id="catTreats">Cat Treats - $$5.00</option>
</select>
<input type="button" value="Add To Cart" id="addToCart" onclick="addToCart()">
<div id="cart">
<p id="beforeTax">Before Tax: </p>
<p id="price">Total: </p>
</div>
<br>
<label for="name">Name: </label>
<input type="text" id="name" placeholder="Enter name">
<label for="email">Email: </label>
<input type="email" id="email" placeholder="Enter email">
<br><br><br>
<label for="creditCard">Credit card number</label>
<input type="text" id="creditCard" placeholder="xxxx-xxxx-xxxx-xxxx">
<label for="expiryDate">Expiry Date: </label>
<input type="month">
<br><br><br>
</div>
</div>
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
JavaScript
//let lollipopsPrice = document.getElementById("lollipops").value;
//let recipePrice= document.getElementById("recipes").value;
//let giftwrapPrice = document.getElementById("giftwrap").value;
//let dogTreatsPrice = document.getElementById("dogsTreats").value;
//let catTreatsPrice = document.getElementById("catTreats").value;
function addToCart()
{
let item=document.getElementsByTagName("option").value;
if (item.value=="Box of Lollipops - $2.00")
{
document.write("<p>Box of Lollipops - $2.00</p>");
}
console.log();
}
To write something in the document you can use can use append, or innerHTML.
When the option is selected it will fire the addToCart function, and depending on where you want to write the new element (when you say "javascript should create a new tag", I imagine you mean a new element).
As you can see following the links, you create a div,p and text inside the p, like this:
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p)
p.append("some text")
or you could use innerHTML like this:
p.innerHTML = "some text in innerHTML"
Even though, as stated on the Developer Mozilla site, innerHTML presents some vulnerability issues and it is recommended to use the setHTML() method to sanitize user inputs. In your case it's a selection so it is not much relevant.
I am new to JavaScript and don't know why my 2D array (each primary row element having both 'Word' and 'Color Value' column elements) is not being updated with user inputted form values? Also why it is not displaying the array?
Any help is greatly appreciated!
HTML Code:
<html>
<head>
Your current list of words to search:
<p id = "Array"> </p>
</head>
<body>
<form>
Input Word:<br><br>
<input type="text" id="wordInputId" ><br>
<br> Highlight Color: <select name="colortype" id="colorTypeId">
<br>
<br>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Red</option>
<option value="4">Yellow</option>
</select>
<br/>
<br/>
<input type="button" name="submit" value="Add Word" onclick="addEntry( inventory, document.getElementById('wordInputId').value, document.getElementById('colorTypeId').value )"/>
</form>
<br>
<button> Search Page</button>
<script src="Words.js">
var inventory = [[]];
displayInventory(inventory);
</script>
</body>
</html>
JS Functions (Words.js):
function displayInventory(inventory){
document.getElementById("Array").innerHTML = inventory.toString();
}
function addEntry(inventory, word, color){
inventory.push([[word.value],[color.value]]);
//displayInventory(inventory);
}
Using src and script lines in same script tag is a wrong way to define your scripts. First you need to seperate them. Then your displayInventory function only called once when script is compiled. You can check it by binding it on click event. Also you don't need to send inventory array with button. It will be defined in script already. Also you are getting values second time on your code. It means you are trying to get value of value and this is bad. Check this code please.
var inventory = [[]];
function displayInventory(inventory){
document.getElementById("Array").innerHTML = inventory.toString();
}
function addEntry(word, color){
inventory.push([[word],[color]]);
displayInventory(inventory);
}
<html>
<head>
</head>
<body>
Your current list of words to search:
<p id = "Array"> </p>
<form>
Input Word:<br><br>
<input type="text" id="wordInputId" ><br>
<br> Highlight Color: <select name="colortype" id="colorTypeId">
<br>
<br>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Red</option>
<option value="4">Yellow</option>
</select>
<br/>
<br/>
<input type="button" name="submit" value="Add Word" onclick="addEntry(document.getElementById('wordInputId').value, document.getElementById('colorTypeId').value)"/>
</form>
<br>
<button> Search Page</button>
</body>
</html>
You can't have both a src attribute and a body on a script tag. You can have either one.
So, you should structure it like this:
<script type="text/javascript" src="Words.js"></script>
<script type="text/javascript">
var inventory = [[]];
displayInventory(inventory);
</script>
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'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>
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') + "'>"