JavaScript problems with HTML user input - javascript

Sorry if this question is answered somewhere, but I couldn't find anything close to my question or an answer in other posts.
I'm trying to make a blog, but I'm still learning, so I use my index page for experimenting. Anyways, I have a section on my webpage where you get an output dependant on the input of the user and I can't get the input from the webpage to be received by the JavaScript.
DO NOTE that I only tried this in Microsoft Edge on my laptop and Firefox on my phone, but I don't think that it's to my browsers.
Also, I think it effects my calculator, but that's not for this post.
Feel free to edit my code in the answers, but it would be preferred to explain the edits to the code.
Anyways, thank you in advance for any help you're willing to provide!
Note that I haven't found any posts that answer my question, so please link to the post before closing this post :)
Also, the blank spaces are for future code and I'm not a pro in case someone didn't figure that out.
function age(){
var age=document.getElementById('age');
if(age<18){
document.getElementById('Age').innerHTML="Underage";
alert("This is your age: "+age);
}
else{document.getElementById('Age').innerHTML="Of age";
alert("This is your age: "+age);
}
}
function calculate(){
var num1=document.getElementById('firstNumber');
var num2=document.getElementById('secondNumber');
var sum=num1+num2;
document.getElementById('Age').innerHTML=sum;
}
.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="fistNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>
<script src="mainpage.js"></script>
</body>
</html>
If I use alert(), I get odd results. Like in the code, the output is
This is your age: [object HTMLInputElement].
When I change it to:
var age2=++age;
alert("This is your age: "+age2);
then the output goes from [object HTMLInputElement] to NaN.
Explanations?

Okay?
At first I found some inconsistencies:
1- "var age = document.getElementById ('age')" failed to report which property needed. In your case: "value". In the "calculate" function I encountered the same problem on the first two lines
2- "var num1 = document.getElementById ('fistNumber')" element id was wrong. I have corrected for "firstNumber"
3- In two moments in which you make a comparison of the age and sum of the values captured in the "calculate" function, I used the "parseInt" function to prevent the variables from being considered strings and thus concatenated.
I hope I have helped.
function age(){
var age=document.getElementById('age').value;
if(parseInt(age)<18){
document.getElementById('Age').innerHTML="Underage";
alert("This is your age: "+age);
}
else{alert("This is your age: "+age);
}
}
function calculate(){
var num1=document.getElementById('firstNumber').value;
var num2=document.getElementById('secondNumber').value;
var sum=parseInt(num1)+parseInt(num2);
document.getElementById('Age').innerHTML=sum;
}
.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>
<script src="mainpage.js"></script>
</body>
</html>

So here are the changes I made:
Firstly, use the value of the property of dom elements you fetch by id.
Then correct the spelling of firstNumber in you HTML. You have mistyped fistNumber.
Also before comparing (x<18) in your age function, you must convert the string to an integer using the parseInt function.
function age(){
var age=document.getElementById('age').value;
age = parseInt(age);
if(age<18){
document.getElementById('Age').innerHTML="Underage";
alert("This is your age: "+age);
}
else{alert("This is your age: "+age);
}
}
function calculate(){
var num1=document.getElementById('firstNumber').value;
var num2=document.getElementById('secondNumber').value;
var sum=num1+num2;
document.getElementById('Age').innerHTML=sum;
}
.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>
<script src="mainpage.js"></script>
</body>
</html>

You need to get the 'value' of the property: document.getElementById('age').value;
Also, your first name input ID is miss-spelled. "fistNumber"
function age() {
var age = document.getElementById('age').value;
if(age == "" || age == null) {
alert("Please enter an age!");
return;
}
if (parseInt(age) < 18) {
document.getElementById('alert').innerHTML = "Underage";
alert("This is your age: " + age);
} else {
document.getElementById('alert').innerHTML = "Of Age";
alert("This is your age: " + age);
}
}
function calculate() {
var num1 = document.getElementById('firstNumber').value;
var num2 = document.getElementById('secondNumber').value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('alert').innerHTML = sum;
}
.page {
background-color: #ce6efa;
}
#firstHeading {
font-family: Nyala, "Palatino Linotype";
}
label {
color: #5728ad;
}
#Age {
color: #243bd4;
}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="alert"></p>
<script src="mainpage.js"></script>
</body>
</html>

Related

can I store array of object in local-storage with the same property every time which is gonna stay even if I refresh the page in javaScript?

I have written a program which takes inputs and store in local storage as an object into an array. until I don't refresh the page and give inputs, it makes a NEW array every time and put those input values with the same property into an object. bur whenever I refresh the page and run that function again, the local storage lose it's all previous data and start storing new data. although I didn't style the structure and didn't give any input validation. but jus insert inputs and check the local-storage and you will understand.
How can I store those data into local-storage even if the page has been refreshed?
Thanks in advance.
<!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>
<form id="regform">
<div id="name">
<h2 class="name">Name</h2>
<input id="firstName" type="text" name="first" value=""><br>
<label class="firstlabel" name="firstname">first name</label>
<input id="lastName" type="text" name="last" value=""><br>
<label class="lastlabel" name="lastname">last name</label>
</div>
<h2 class="name">Email</h2>
<input id="email" type="text" name="email">
<h2 class="name">Password</h2>
<input id="pass" type="password" name="password" autocomplete="off">
<h2 class="name">Phone</h2>
<input id="code" type="text" name="area_code">
<label class="area-code">Area Code</label>
<input id="number" type="text" name="phone">
<label class="phone-number">Phone Number</label>
<button type="submit" id="btnreg" >Register</button>
</form>
<script>
var fname=document.getElementById("firstName");
var lname=document.getElementById("lastName");
var btn=document.getElementById("btnreg");
var password=document.getElementById("pass");
var mail=document.getElementById("email");
var ariacode=document.getElementById("code");
var pnumber=document.getElementById("number");
let datas = [];
var addData= (ev)=>{
ev.preventDefault();
var data = {
name: fname.value +" "+ lname.value,
passcode: password.value,
email: mail.value,
phonenumber: "+"+ariacode.value +" "+ pnumber.value
};
datas.push(data);
document.getElementById('regform').reset();
var data_serialized = JSON.stringify(datas);
localStorage.setItem("datas", data_serialized);
var data_deserialized = JSON.parse(localStorage.getItem("datas"));
};
document.addEventListener('DOMContentLoaded', ()=>{
btn.onclick=addData;
});
</script>
</body>
</html>
Have you tried checking the local storage to see if it's not empty before assigning new data to it? If you do not, you might be re-writing the local storage each time the page is refreshed. Please show your code.
I changed your code a bit and now it works.
The problem was: You just overwrite the storage entry on every submit.
Solution: read existing entry, push new data, write new entry.
<!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>
<form id="regform">
<div id="name">
<h2 class="name">Name</h2>
<input id="firstName" type="text" name="first" value=""><br>
<label class="firstlabel" name="firstname">first name</label>
<input id="lastName" type="text" name="last" value=""><br>
<label class="lastlabel" name="lastname">last name</label>
</div>
<h2 class="name">Email</h2>
<input id="email" type="text" name="email">
<h2 class="name">Password</h2>
<input id="pass" type="password" name="password" autocomplete="off">
<h2 class="name">Phone</h2>
<input id="code" type="text" name="area_code">
<label class="area-code">Area Code</label>
<input id="number" type="text" name="phone">
<label class="phone-number">Phone Number</label>
<button type="submit" id="btnreg" >Register</button>
</form>
<script>
var fname=document.getElementById("firstName");
var lname=document.getElementById("lastName");
var btn=document.getElementById("btnreg");
var password=document.getElementById("pass");
var mail=document.getElementById("email");
var ariacode=document.getElementById("code");
var pnumber=document.getElementById("number");
let datas = [];
var addData= (ev)=>{
ev.preventDefault();
var data = {
name: fname.value +" "+ lname.value,
passcode: password.value,
email: mail.value,
phonenumber: "+"+ariacode.value +" "+ pnumber.value
};
var datas = JSON.parse(localStorage.getItem("datas"));
datas.push(data);
document.getElementById('regform').reset();
var data_serialized = JSON.stringify(datas);
localStorage.setItem("datas", data_serialized);
};
document.addEventListener('DOMContentLoaded', ()=>{
btn.onclick=addData;
});
</script>
</body>
</html>

Submit shows code when hosted

I have a quiz with values that are added to a sum which determines the image displayed but is only showing me my raw .js file when I click submit. I am hosting it and am not sure why it is showing me this. The previous function in the file work, since the validation works and is found in that file.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/random.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2 align="center">Overwatch Quiz</h2>
<p>
Hi there! This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="js/random.js" method="post" name="quiz_form" onsubmit="owchar()">
<p>
<br>
<input id='fName' name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" class="validate" />
<img width="45px" height="45px"src='img/Q.png' id="fNameImg" />
</p>
<p>
<br>
<input id="last_name" name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" class="validate"/>
<img width="45px" height="45px" src='img/Q.png' id="last_nameImg" />
</p>
<p>
<br>
<input id="email" name="email" type="email" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" class="validate" />
<img width="45px" height="45px" src='img/Q.png' id="emailImg" />
</p>
<p>
<br>
<input id='phone' name="number" type="tel" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" class="validate" />
<img width="45px" height="45px" src='img/Q.png' id="phoneImg" />
</p>
<p>
<br>
<input id='sulley' name="sulley" type="sulley" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" class="validate"/>
<img width="45px" height="45px" src='img/Q.png' id="sulleyImg" />
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).
<br>
<input type="radio" name="exist" value="2">Female(Human).
<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.
<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.
<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?
<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.
<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.
<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.
<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.
<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<h2 align="center" >Congratulations you got...</h2>
<div id="character" align="center" height="499" width="281" >
<img src="" id="character"/>
<br>
<br>
<br>
</div>
<div id="footer">
<h2 align="center">Created by Kenneth Dunn </h2>
</p>
</div>
</div>
</div>
<script src="js/random.js" type="text/javascript"></script>
</body>
</html>
JS
function validateData() {
console.log(this);
var letters = /^[A-Za-z]+$/;
var email = [#];
var tel = /^\d{3}-\d{3}-\d{4}$/gm;
var sulley = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
var imgId = this.id + 'Img';
var img = document.getElementById(imgId);
console.log(img)
var valid = false;
if (this.type == 'text') {
if (this.value.match(letters)) {
valid = true;
}
}
if (this.type == 'email') {
if (this.value.match(email)) {
valid = true;
}
}
if (this.type == 'tel') {
if (this.value.match(tel)) {
valid = true;
}
}
if (this.type == 'sulley') {
if (this.value.match(sulley)) {
valid = true;
}
}
if (valid) {
img.src = "img/check.png";
} else {
img.src = "img/redx.png";
}
}
var els = document.getElementsByClassName("validate");
for(i=0 ; i<els.length ; i++){
els[i].addEventListener("change", validateData, false);
}
function owchar(){
var sum = 0;
var w = document.forms["quiz_form"]["exist"].value;
sum+=w;
var q = document.forms["quiz_form"]["weapon"].value;
sum+=q;
var r = document.forms["quiz_form"]["idea"].value;
sum+=r;
var g = document.forms["quiz_form"]["look"].value;
sum+=g;
if (sum>1 && sum<6){
document.getElementById("character").src="img/reaper.png";
return false;
}
else if (sum>6 && sum<9){
document.getElementById("character").src="img/tracer.jpeg";
return false;
}
else {
document.getElementById("character").src="img/winston.png";
return false;
}
}
Your form is defined as:
<form action="js/random.js" method="post" name="quiz_form" onsubmit="owchar()">
The action tells the browser where to go after submission, not what js file to look in. Javascript uses a shared global scope, meaning that all JS files use the same global scope, even ones built directly into the page. Because of this Javascript awesomeness -- or weirdness (depending on your views) -- you don't need to specify where the code is that you want to run, you just have to load the code (using a <script> tag).
TL;DR;
Change this line so that it looks like the following example:
<form name="quiz_form" onsubmit="owchar()">

Calling string from one function into another doesent seem to work., why?

So I have this code and it does not seem to work. The thing I want it to do is to call the "together" from the function "go" in the function "second". What am i doing wrong?
The program was initially supposed to take what is in the input-text and add it with the ".com" or the ".no"(depending on what u checked) and redirect to that page. But I only want to call the "together" in the "second" function. Is there any better way to do it?
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for="no">.no</label><br />
<input type="radio" id="com" name="end" value=".com">
<label for="com">.com</label>
</div>
</fieldset>
<script type="text/javascript">
var end = "";
var input = document.getElementById("input").value;
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
}
second(together);
function second(together){
alert(together);
}
</script>
</body>
</html>
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
} // remove this
second(together);
} // add this

comparing a user given input to a string in javascript

parts of my code. it was supposed to count 2 if all of your answers were correct.
i am just a begginer at this. the error is that when i open my browser and click the "check?" nothing happens.
<head>
<script language="javascript">
function checker()
{
var myscore = 0;
if(parseInt(document.quiz.num1.value) == 6)
{ myscore = (myscore + 1);}
else
{ myscore;}
if(document.quiz.num2.value == type of "dry" )
{ myscore = (myscore + 1);}
else
{ myscore;}
document.myform.thescore.value = myscore;
}
</script>
</head>
<body>
<form name="quiz">
How many feet are ther in 1 Fathom? <input type="text" id="num1">
<br>
What type of stones can never be found in the ocean? <input type="text" id="num2">
<br>
My Score: <input type="text" id="thescore"><br>
<input type="button" value="Check?" onClick="checker()">
</form>
</body>
here is your answer:
<html>
<head>
<script lang="Java-Script">
var msg;
var sc;
function validateTest()
{
sc=0;
msg=document.frm.num1.value;
if(msg==6)
sc=sc+1;
msg=document.frm.num2.value;
if(msg=='dry')
sc=sc+1;
document.frm.thescore.value=sc;
return;
}
</script>
</head>
<body>
<form name="frm">
How many feet are there in 1 Fathom? <input type="text" name="num1"><br>
What type of stones can never be found in the ocean? <input type="text" name="num2"><br>
My Score: <input type="text" name="thescore"><br>
<input type="button" value="Submit" onclick="validateTest()">
</form>
</body>
</html>
i have already tested this, it will work.

Fallback solution for attributes in HTML5

This is a shema in HTML5. HTML5 has attributes like: autofocus, placeholder, date etc. Not all browsers supports these. Therefore I want to make some fallback functions. I'm not that familiar with JS, JQuery, but i really want to learn :)
The fallbackfuntions uses the elementSupportAttribute-function to check wether or not an element can hold a specific attribute. The code works fine when I don't run the methods through this if-statement: if (!(elementSupportsAttribute(element, attribute)), but when I do, the code does not run at all. Can anybody see the problem?
Also, I tried to use the Modernizr-framework, but did not manage that either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "UTF-8" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="Skjema.css"/>
<title>Bestilling av busstur</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function() {
if (!(elementSupportsAttribute('input','autofocus')) {
$("#auto").focus();
}
if(!(elementSupportsAttribute('input','date')){
$("#datepicker").datepicker();
}
});
function elementSupportsAttribute(element,attribute){
var test = document.createElement(element);
if (attribute in test){
return true;
}
else {
return false;
}
}
function finnAlleRequired(){
if (!(elementSupportsAttribute('input', 'required')){
var alle = document.getElementsByClassName("requiredInput");
var print = "";
for (i=0;i<alle.length; i++){
var temp = alle[i];
if (temp.value==""){
print += temp.name + " ";
temp.classList.add("error");
}
else {
temp.classList.remove("error");
}
}
}
if(!(elementSupportsAttribute('input','number')){
numberCheck();
}
}
function numberCheck () {
var number = document.getElementById("number").value;
var min = 1;
var max = 10;
if(number < 1 || number > 10){
alert("Antallet personer du kan bestille til er mellom 1 og 10");
}
}
</script>
</head>
<body>
<header>
<h1>
Bestilling av busstur
</h1>
</header>
<article>
Vennligst fyll ut skjema under for å bestille busstur. Du kan bestille plasser for max 10 personer. Felter markert med <label class="required">*</label> er obligatoriske.
</article>
<form>
<p>
<label for="name">Navn:</label><br/>
<input type="text" name="name" placeholder="Fullt navn" id="auto" autofocus>
</p>
<p>
<label class="required">*</label>
<label for="email">E-post:</label><br/>
<input type="email" name="email" placeholder="nordmann#norge.no" class="requiredInput" required>
</p>
<p>
<label for="phone">Telefon:</label><br/>
<input type="tel" name="phone" placeholder="11223344"> </p>
<p>
<label class="required">*</label>
<label for="date">Dato:</label><br/>
<input type="date" name="date" id="datepicker" class="requiredInput"required>
</p>
<p>
<label class="required">*</label>
<label for="numberPersons">Antall:</label><br/>
<input type="number" name="numberPersons" min="1" max="10" value="2" class="requiredInput" id="number" required>
</p>
<p>
<label for="other">Hvor fant du informasjon om oss?</label><br/>
<input type="text" name="other" placeholder="Facebook, Twitter, venner">
</p>
<p>
<input type="submit" value="Registrer" onclick="finnAlleRequired()">
</form>
</body>
</html>
Your best bet is probably to find polyfill(s) for the features you wish to ensure are supported.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Also, I tried to use the Modernizr-framework, but did not manage that
either.
Modernizr doesn't automatically fix unsupported features, but will let you know what features are available and conditionally load fallbacks.
The code works fine when I don't run the methods through this
if-statement: if (!(elementSupportsAttribute(element, attribute)), but
when I do, the code does not run at all.
I ran a quick test using this snippet and several HTML 5 form attributes.
function elementSupportsAttribute(element,attribute){
var test = document.createElement(element);
if (attribute in test){
return true;
}
else {
return false;
}
}
alert(elementSupportsAttribute("input", "required"));
The function does appear to work in Chrome 24: http://jsfiddle.net/eT5Ac/.
However, it would be much better to use one of Modernizr's established tests, specifically the Input Types Test.

Categories

Resources