How do I output a string from a textbox in javascript? - javascript

I am working on a pyg-llatin translator but all im trying to do at this stage is get it to change the text of whats inside the p tag to what is typed in the textbox but when I press the button nothing happens.
HTML:
var word
function translateWord() {
getWord();
outputWord();
alert("test");
}
function getWord() {
word = Document.getElementById("wordIn").value
}
function outputWord() {
Document.getElementById("wordOut").innerHTML = word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pig Latin Translator</title>
</head>
<body>
<script src="JS/Translator.js"></script>
<h1>Pig Latin Translator</h1>
<br>
<form>
<input type="text" id="wordIn">
<button type="button" name="Translate" onclick="translateWord()">Translate</button>
<p id="wordOut">-</p>
</form>
<br>
</body>
</html>

Document is the class that document is an instance of, they are not the same though.
console.log(document === Document) // => false
console.log(document instanceof Document) // => true
With that changed, your code works:
var word
function translateWord() {
getWord();
outputWord();
alert("test");
}
function getWord()
{
word = document.getElementById("wordIn").value
}
function outputWord()
{
document.getElementById("wordOut").innerHTML = word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pig Latin Translator</title>
</head>
<body>
<script src="JS/Translator.js"></script>
<h1>Pig Latin Translator</h1>
<br>
<form>
<input type="text" id="wordIn">
<button type="button" name="Translate" onclick="translateWord()">Translate</button>
<p id="wordOut">-</p>
</form>
<br>
</body>
</html>

you replace your translateWord() function to this as:
function translateWord() {
document.getElementById("wordOut").innerHTML = document.getElementById("wordIn").value;
}

var word
function translateWord() {
getWord();
outputWord();
alert("test");
}
function getWord()
{
word = document.getElementById("wordIn").value
}
function outputWord()
{
document.getElementById("wordOut").innerHTML = word;
}

Related

I'm Tring to get a user to chose with 2 buttons which site will be presented in iframe tag

I'm Tring to get a user to chose with 2 buttons, which site will be presented in iframe tag.
Option1.html does work as default, but Option1.html & Option2.html do not work with user button.
When Clicking the buttons, I Get the default browser error "Can’t reach this page".
Please Take into account, that I a beginner with HTML and JS.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "Option1.htm";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "Option2.htm";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
Ok first make a folder and put this code in that and make another html document named same as given in your code...
Or see this
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "index.html";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "index2.html";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
This will be the main page...
And this will be inbdex.html. When user clicks option1 then this will be shown...
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Stopwatch</title>
</head>
<body>
<div>Seconds: <span id="time">0</span></div>
<input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
<input type="button" id="stopTimer" value="Stop Timer" onclick="stop();"><br/>
<script>
var timeElapsed = 0;
var timerID = -1;
function tick() {
timeElapsed++
document.getElementById("time").innerHTML = timeElapsed;
}
function start() {
if(timerID == -1){
timerID = setInterval(tick, 1000);
}
}
function stop() {
if(timerID != -1){
clearInterval(timerID)
timerID = -1
}
}
function reset() {
stop();
timeElapsed = -1;
tick()
}
</script>
</body>
</html>
And the below thing will be index2.html. So when user clicks option2 then this will be shown!
<html>
this is other page
</html>

Regular expression (For digits and characters)

I've been experimenting with a local sign in/log in system and I've hit a error. I was trying to make a regular expression that checks if the user's username and password contain 8 characters and 2 numbers. I really am not sure how to do that but this is all my code I've been able too put togheter.
HTML code:
<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id='form'>
<title>Sign Up #1</title>
<h3>Simple Signup system</h3>
<div>
<label>Username:</label>
<input type="text" name="text1" id = "username">
</div>
<div>
<label>Password:</label>
<input type="text" name="text2" id = "password">
<div>
<button type="button" id="subBtn">Sign Up!</button>
</form>
</body>
<script src="main.js"></script>
</html>
My JS code:
var t = 'everything good, loging in'
var f = 'something is not right, try again.'
var tf = 'not-set'
var statment = /^[a-zA-Z]*$/
window.onload = function() {
document.getElementById('subBtn').addEventListener('click', onSubmit);
}
// main
function onSubmit() {
if (document.getElementById('username').value.includes(Number)) {
tf = 'True'
} else {
tf = 'False'
}
if (document.getElementById('username').value.includes(statment)) {
tf.push('True')
} else {
tf.push('False')
}
if (tf = ['True', 'True']) {
alert('Good to go, redirecting')
} else {
alert('Username does not meet the standards for creating a account!')
}
document.forms['forms1'].submit()
}
EDIT: Was able to redo a part of the code, I'm still using regex to check for letters because I'm not sure how to do it without it.
Current error: 'first can't be a Regular Expression'.

Can't add 1 by pressing button

I made a simple HTML with JS inside, and its about add 1 to variable and keep running until user gets 1 by rng(random number generator). Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
var click = 0;
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>
At this code, click = click+1 don't work and click is stuck at 1. What should I do?
The reason your click stuck to 1 is whenever function called you are declaring
click = 0, so it is initialized every time you press the button. So just declare var click outside of function clicked() and see the magic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var click = 0;
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>

JavaScript; REGEX between delimiters and separate by space

I have this code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.onload = function() {
var e = document.getElementById("first"), n=document.getElementById("second");
e.addEventListener("input", function() {
n.value = e.value.match( /\<span class="my_class">(.+)\<\/span>/ )[1]
})
};
</script>
</head>
<body>
<input class="textfield" id="first"><br><br>
<input class="textfield" id="second">
</body>
</html>
When you insert <span class="my_class">test</span> in first field, second field will output test. This is exactly what I want.
But if I insert e.g. <span class="my_class">test</span> some text<span class="my_class">hello</span> I'm getting test</span> some text<span class="my_class">hello instead of test hello (separated by a space).
What am I doing wrong?
Use jquery construct to parse the HTML and get the value inside the markup span
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var e = document.getElementById("first"),
n = document.getElementById("second");
e.addEventListener("input", function() {
var valueArr = [];
$(e.value).each(function(v, i) {
if (i.nodeName == "SPAN" && i.classList.contains( "my_class" ) ) {
valueArr.push($(i).text());
}
});
n.value = valueArr.join(" ");
})
};
</script>
</head>
<body>
<input class="textfield" id="first"><br><br>
<input class="textfield" id="second">
</body>
</html>

window onload javascript in chrome

Thanks in advance.
Please find the following script, it alerts e.value = "yes" in fire fox and "no" chrome...
what' wrong with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>new_file</title>
<script type="text/javascript">
function func(){
alert("I am at Func")
}
var i = 0;
document.write("<form style='display: block'><input name='test' id='test' value='no'></form>");
window.onload = function () {
global();
};
function global(){
var e=document.getElementById("test");
alert(e.value);
if(e.value=="no" && i == 0 ){
e.value="yes";
i = 1;
}
else {
//e.value="no";
func();
}
}
</script>
</head>
<body>
</body>
</html>
What i need is based on that e.value i need to call the func()? Any one please answer it...

Categories