Create a Stack Overflow-like form - javascript

I'm trying to create a form which prints the input directly beneath it, just like here on Stack Overflow when you write a question. However, since I'm new to Javascript and such, I don't know how to search for the correct function (I don't know the correct name for this technique).
Just a push in the right direction will already be a big help! Thanks!

<!doctype html>
<html>
<head>
</head>
<body>
<script>
function myFunction()
{
var input = document.getElementById('fname')
var div = document.getElementById('text');
div.innerHTML = escape(input.value);
}
</script>
<input type="text" id="fname" onkeyup="myFunction()">
<div id="text"></div>
</body>
</html>

Related

How to make quizzes with text inputs instead of option friendly inputs (radio,list,etc) that still tell you which ones are right and wrong in HTML?

I need this for my school project! I also have no clue on how to code this one, so I have nothing to put here. Thank you..
Try something like this you can play around with it on codepen here https://codepen.io/wispyco/pen/PoPgKzV Try typing in youranswer all one word and hitting submit, and try typing anything else and hitting submit
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz</title>
</head>
<body>
<form>
<input id="answer" type="text">
<input type="submit">
</form>
</body>
</html>
js
var wordInput = document.getElementById("answer");
var form_el = document.querySelector("form");
form_el.addEventListener("submit", function(evt) {
evt.preventDefault();
console.log(wordInput.value)
if(wordInput.value==="youranswer"){
alert("correct")
}
else{
alert("incorrect")
}
});

button onclick function is not called

I'm making a webpage and when a button is clicked, it will delete every element inside the HTML element and append an iframe. Although, it doesn't seem to be working.
index.html:
<html id="html">
<head>
<script type="text/javascript" src="/freevpn/script.js"></script>
</head>
<body>
<input type="text" id="input" value="https://">
<button onclick="submit()">Go!</button>
</body>
</html>
script.js:
function submit() {
var submit = document.getElementById("submit");
var input = document.getElementById("input");
var iframe = document.createElement("iframe");
var html = document.getElementById("html");
iframe.setAttribute("src", input.value);
html.innerHTML = "";
html.appendChild(iframe);
iframe.requestFullscreen();
}
I'm not sure why this isn't working, but it has to be something. Thanks in advance!
NEW UPDATE: There were a few problems. It is linking to the javascript, I fixed the function, and I added parenthesis, but it doesn't seem to be updated in the browser. I've cleared my cache and everything, and it still isn't updating. My website is linked through Freenom, Cloudflare, Google Analytics and Search Console, so does it just take a while to update? And if so, is there a way to make it faster?
Try this, you are calling the function incorrectly.
You must use the () to call a function:
<button onclick="submit()">Go!</button>
function submit() {
var submit = document.getElementById("submit");
var input = document.getElementById("input");
var iframe = document.createElement("iframe");
var html = document.getElementById("html");
iframe.setAttribute("src", input.value);
html.innerHTML = "";
html.appendChild(iframe);
iframe.requestFullscreen();
}
<html id="html">
<head>
<script type="text/javascript" src="/freevpn/script.js"></script>
</head>
<body>
<input type="text" id="input" value="https://www.youtube.com/embed/_70Q-Xj3rEo">
<button onclick="submit()">Go!</button>
</body>
</html>
You are missing the parentheses when you are calling your JavaScript function. Try the below:
<button onclick="submit()">Go!</button>
Here is a handy reference for the onclick Event: https://www.w3schools.com/jsref/event_onclick.asp
Also it is a good idea to call put your <script> tag at the bottom of the body (i.e. below the button in your code snippet). This is because the Javascript file will be loaded first and the HTML elements may not have been created yet that you are accessing with the DOM.

JavaScript Calculator using HTML forms

I want to create a calculator that, using JavaScript, takes a number from an HTML input box like this one.
// Take form input and multiply by four
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input placeholder="Side Length of Square"/>
</body>
</html>
How could I then relay the user input, say 5, so that the JavaScript would take "5" and multiply it to find the area of the square? This is my first question ever on Stack Overflow, so I apologize if I did something wrong. Thanks for the help!
You would use javascript's onkeyup to calculate the area of a square as the user types in numbers. Check out the code below!
function calc(){
var val=document.getElementById("myInput").value;
document.getElementById("area").innerHTML=Math.pow(val, 2);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="myInput" placeholder="Side Length of Square"onkeyup="calc()"/>
<p>Area : <span id="area"></span></p>
</body>
</html>
First, you need to decide where you want to place your output, e.g. introduce a new <div> element whose text content will hold the computed side length.
Also, you should give your <input> as well as your output <div> a unique id attribute so you can identify it later on from within your JavaScript code.
Then, you would introduce a new <script> before the closing </body> tag. This guarantees that at the time of script execution, all relevant HTML elements have already been loaded and added to the Document Object Model (DOM) so that your script can access them.
Finally, you write a JavaScript "input" event handler and attach it to the <input> element.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="number" id="side-length" placeholder="Side Length of Square">
<div id="area"></div>
<script>
let input = document.getElementById("side-length");
let output = document.getElementById("area");
input.addEventListener("input", function(event) {
let sideLength = input.valueAsNumber;
output.textContent = sideLength * sideLength;
});
</script>
</body>
</html>
Note: Above event handler computes the area of the square with given side length, as per your question and opposed to the comment above your code snippet.

Using Form Information As a Variable using Javascript and Forms

Alright, people of Stack Overflow, I have a question for you: I am in a web design class at my high school and learning ahead of the class since I already knew the first half of the class. I was asked by my teacher if I could teach what I have learned about Javascript and I agreed. However, one of the things she wanted me to teach is not working for me when I try it out on my own. I am trying to do a simple check for a variable that when you input a name into a box, if it is my name or the teacher's name it pulls up a popup that says "welcome" or something like that, and if it is anyone else it says "go away" the only issue is that no matter what I try something in the code is not working. This is a test function that I have at the moment; it is intended to print out the
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
alert(name);
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
<script type="text/javascript">
</script>
</body>
</html>
Here is the full version of the code that I am trying to get to work:
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
</body>
</html>
You have several issues here:
You have a semicolon after the if statement
You are reading the name value on page load, at a point when the input field hasn't even been added to the page yet and certainly hasn't been filled out by the user yet. You need to read it when the user submits the form, i.e. you need to move the name assignment inside the validator method:
JS:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup");
} else {
alert("Nnope");
}
}
There shouldn't be a semicolon after the if. You also have to put the variable inside the function to make it update:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup")
} else {
alert("Nnope");
}
}
JSFiddle: http://jsfiddle.net/FhCTc/1/
You are setting your variable outside your function:
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
This means var name is set when the page loads, but no other times. Move it into validator().
You also ended your if with a semi-colon, which would cause an error on the else portion.
Besides all the previous answers it is in good manner in JavaScript to use === not ==

Display FCKeditor input data in HTML format on same page, as user types?

I am currently playing around with the FCKEditor, and I am trying to replicate how stack overflow shows exactly how your post will look in HTML as you type it up. My FCKEditor creates just fine, I just don't know how to go about accessing the editor data once it is created. What I want to do is get the html from the editor and then put it into the <p id="inputText"></p>. Trying to access it with jQuery using $("#fckEdtr") doesn't work, which I expect is because it's created on the fly with javascript. I am aware of the IsDirty() method in the FCKeditor JavaScript API, I just haven't seen any solid examples of how to get the current instance of the editor and use the method. Can anyone help? My code is below:
<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...code to output editor data as user types
});
</script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
I just found the answer to this in another question on SO:
How can I enable live preview for FCKeditor in an ASP.Net site?
Also, when I use a div element instead of a paragraph element, it works. Here's my final working code for anyone it might help:
<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
function FCKeditor_OnComplete( oFCKeditor )
{
oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("postText").innerHTML =
oFCKeditor.GetHTML(true);
}) ;
}
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Custom' ;
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
It's good that you found the answer already, but I wonder why do you need preview window when you are dealing with WYSIWYG editor. My guess is that the look you are getting in the editor is different from the resulting look because of CSS applied to the latter. If I am wrong, disregard the advice that follows.
If that is the case, you may think of copying the most relevant parts of your CSS to \fckeditor\editor\css\fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you do want the difference. For example, spoilers should be hidden when posted but visible in the editor.

Categories

Resources