why my alert in the function not working?? - javascript

The code should receive a sentence / string and print it in reverse, if word or letter that wrote in the filter contained within the word belongs to a string - the word will not print.
The question why my check alert "hi" not working?? tnx!
<html>
<head>
<script>
function myfunc() {
alert ("hi");
var count=0;
var phrase= document.getElementById('phrase').value;
var filter = document.getElementById('filter').value;
var arrReverse = phrase.split(" ").reverse();
for (i=0; i<arrReverse.length; i++) {
if (arrReverse[i].search(filter)==-1) {
if (i%2==0) {
document.getElementById('words').innerHTML="<span class="word"><u>"arrReverse[i]"</u><span>";
} else {
document.getElementById('words').innerHTML="<span class="word">"arrReverse[i]"<span>";
}
} else if (arrReverse[i].search(filter)!=-1) { count++; }
if (count>0) {
document.getElementById('count').innerHTML="<span class="count">"count "word(s) filtered out <span>";
}
}
</script>
</head>
<body >
<h1>Sentence Reverser!</h1>
<div> Phrase: <input id="phrase" type="text" size="40"/></div>
<div> Filter: <input id="filter" type="text" size="10"/></div>
<div><button id="go" onclick="myfunc()"> Go! </button></div>
<div id="words"></div>
<div id="count"></div>
</body>
</html>

Be careful with "" quotes and '' quotes:
.innerHTML="<span class="word"><u>"arrReverse[i]"</u><span>"; // wrong
.innerHTML="<span class='word'><u>"+arrReverse[i]+"</u><span>"; //right
For further reference check:
http://www.w3schools.com/js/js_obj_string.asp

Related

how to have a userinput be ".pushed" into an array

I would like the user to be able to add a url into the box submit it and then it will be in the array and be displayed in order. I would like this to be able to happen as many times as they click submit.
this is where I am but it searches my computer for the url rather than the web.
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<input type="text" id="user_input" />
<button onClick="add()">ADD</button>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
<script>
var x=1
var user = document.getElementById("user_input");
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
document.getElementById("light").src = colour[0];
function add(){
colour.push(user);
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
</script>
</body>
</html>
If you want this to be reset when user reloads the page, you don't need to use a form.
<input type="text" id="user_input" />
<button onClick=add()>ADD</button>
And your add function
function add(){
var newVal = document.getElementById('user_input').value;
fruits.push(newVal); //assuming your array is named fruits, I can't see in your code where you have defined it.
}
Replace your add function with
var imageInput = document.querySelector("input[name=url]");
function add(evnt){
evnt.preventDefault();
colour.push(imageInput.value);
return false;
}
First you need to declare the array before you try to push it.
var fruits = [];
and then in your add function, get the url element and push to the array you declared previously. It's convenient if you give the element an id.
function add() { fruits.push(document.getElementById('url').value); }
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<form id="user">
insert an image URL to add to cycle: <input type="text" id="url" name="url"><br>
<button onclick="add()">ADD</button>
</form>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
<script>
var x = 1;
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
var fruits = [];
document.getElementById("light").src = colour[0];
var url = document.getElementById('url');
function add(){
fruits.push(url.value);
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
</script>
</body>
</html>
Add into from tag onsubmit="return false" and see add() function which is mentioned in below line.
var x=1
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
document.getElementById("light").src = colour[0];
function add(){
var newVal = document.getElementById('url').value;
colour.push(newVal);
document.getElementById('url').value = '';;
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<form id="user" onsubmit="return false">
insert an image URL to add to cycle: <input type="text" name="url" id="url"><br>
<input type="submit" value="Submit" onclick="add()">
</form>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
</body>
</html>

Create an HTML form with one field and button

I'm new in coding , there is a question that someone gave me and I can't find the right answer , this is the question :
Create an HTML form with one field and button.On button click,get the input,and return the sum of the previous value and the current input value.The value is 0 and input is 5->output is 5,then value is 5,input is 6-> output is 11 and etc.
I tried few things nothing even close ,
if someone can give me the answer Ill be much appreciated , thanks.
There you go, but you should try doing it yourself. it's pretty easy to google things like "on button click" etc.
var total = 0;
$('.js_send').click(function(){
total += parseInt($('.number').val());
$('.total').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="0" class="number"/>
<input type="button" value="send" class="js_send"/>
<div class="total">0</div>
Here's a JQuery free version
var oldInput = 0,
newInput,
outPut;
document.querySelector("#showSum").onclick = function() {
newInput = parseInt(document.querySelector("#newInput").value),
outPut = newInput + oldInput,
oldInput = outPut,
document.querySelector("#result").innerHTML = outPut;
};
#result {
width: 275px;
height: 21px;
background: #ffb6c1;
}
<input type="number" value="0" id="newInput">
<button id="showSum">Show Results</button>
<br>
<div id="result"></div>
Here is the solution to your problem. Put all below code into a html file and name it as index.html, then run the html page.
<html>
<head>
<title></title>
</head>
<body>
Output : <label id="output">0</label>
<form method="get" action="index.html">
Your Input: <input type="text" id="TxtNum"/>
<input type="hidden" id="lastvalue" name="lastvalue" />
<input type="submit" onclick="return doSum();" value="Sum" />
</form>
<script>
//- get last value from querystring.
var lastvalue = getParameterByName('lastvalue');
if (lastvalue != null) {
document.getElementById("lastvalue").value = lastvalue;
document.getElementById("output").innerHTML = lastvalue;
}
/*
* - function to calculate sum
*/
function doSum() {
var newvalue = 0;
if(document.getElementById("TxtNum").value != '')
newvalue = document.getElementById("TxtNum").value;
var lastvalue = 0;
if(document.getElementById("lastvalue").value != '')
lastvalue = document.getElementById("lastvalue").value;
document.getElementById("lastvalue").value = parseInt(newvalue) + parseInt(lastvalue);
output = parseInt(newvalue) + parseInt(lastvalue);
}
/*
* - function to get querystring parameter by name
*/
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</body>
</html>
If you are doing it in server side, You could have a static variable and update it on button click. More like
public static int prevValue;
public int buttonclick(.....){
int sum = textboxValue + prevValue;
prevValue = textboxValue;
return sum;
}
here is your solution
<script type="text/javascript">
var sum=0;
function summ()
{
localStorage.setItem("value",document.getElementById("text").value);
var v=localStorage.getItem("value");
sum=sum+parseInt(v);
alert(sum);
}
</script>
<html>
<input id="text">
<button id="submit" onclick="summ()">sum</button>
</html>
It will be pretty easy.
Created CodePen
http://codepen.io/anon/pen/eJLNXK
function getResult(){
var myinputValue=document.getElementById("myinput").value;
var resultDiv=document.getElementById("result");
if(myinputValue && !isNaN(myinputValue)){
resultDiv.innerHTML=parseInt(myinputValue) + (resultDiv.innerHTML ? parseInt(resultDiv.innerHTML) : 0);
}
}
<input type="text" id="myinput">
<button id="btngetresult" onclick="getResult()">GetResult</button>
<p>
Result:
<div id="result"></div>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function sum() {
var t1 = parseInt(document.getElementById("t1").value);
var t2 = parseInt(document.getElementById("pre").value);
document.getElementById("result").innerHTML = t1+t2;
document.getElementById("pre").value = t1;
}
</script>
</head>
<body>
<div>
<form method="get" action="">
<input type="text" name="t1" id="t1">
<input type="button" value="get sum" name="but" onclick="sum()">
<input type="hidden" name="pre" id="pre" value="0">
</form>
</div>
<div id="result"></div>
</body>
</html>

How to get the textarea value in a div element?

I want the text typed in textarea with id text in the div element typed, how can i?
head
<script>
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0){
document.getElementById("typed").value = txt;
}
}
</script>
body
<input type="text" id="text"></input>
<br>
<b> You Typed : <div id="typed"></div> </b>
<br>
<input type="button" value="Submit" onclick="field()">
.value is for input elements. To put something in a DIV, use .innerText:
document.getElementById("typed").innerText = txt;
DEMO with <input>
DEMO with <textarea>
Change the function like the following
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0)
{
document.getElementById("typed").innerText= txt;
}
}
you can with this :
<html>
<head>
<script>
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0){
document.getElementById("typed").innerText = txt;
console.log(txt);
}
}
</script>
</head>
<body>
<input type="text" id="text"></input>
<br>
<b> You Typed : <div id="typed"></div> </b>
<br>
<input type="button" value="Submit" onclick="field()">
</body>
</html>
document.getElementById("typed").innerHtml = document.getElementById("text").value;

javascript that copies a var to a textbox

I got this code:
#using (Html.BeginForm())
{
<h3 id="js" class="text-blue title-article editable">#Model.Title</h3>
<input type="text" id="testinput" name="testinput" />
<input type="submit" value="submit" onclick="changeLink()">
}
<script>
function changeLink()
{
var str =document.getElementById('js').innerHTML;
alert(str);
}
</script>
When I click the submit-button, the function gets the .innerhtml from the id="js".
I would like the var str to get copied into the textbox with the id="testinput".
You can get value from js element and equal to the testinput
<script>
function changeLink()
{
document.getElementById('js').innerHTML = document.getElementById('testinput').value
}
</script>
Try this..
<script>
function changeLink()
{
document.getElementById('testinput').value=str ;
}
</script>

ASCII Animation

I'm not sure what I'm missing here in my code. I can't get my clearTimeout to work... I keep getting an error saying myStopFunction() is not defined. Any ideas?
I've tried renaming it and checked to make sure that everything matches up, I'm just not sure why I keep getting this dang error!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ASCII Animations</title>
<h1> ASCII Animation Editor/Viewer </h1>
<br><h3> Jordan Keith: Linn-Benton Community College</h3>
<body>
<p> Enter the frams below, separated by "====="
<input onclick = "playAnimation();" type="button" id= "Play" value = "PLAY" />
<input onclick = "myStopFunction();" type="button" id= "Stop" value = "STOP" /></p>
<textarea id = "frameArea" cols="50" rows="30"></textarea>
<textarea id = "displayArea" cols="50" rows="30"></textarea>
<script src="ASCII.js"></script><br>
</form>
</div>
</body>
</html>
JavaScript
function playAnimation()
{
frameStr = document.getElementById("frameArea").value;
if(frameStr.indexOf("\r\n") !=-1)
{
frameSeq = frameStr.split("=====\r\n");
}
else
{
frameSeq = frameStr.split("=====\n");
}
currentFrame = 0;
showNextFrame();
}
var t;
function showNextFrame()
{
document.getElementById("displayArea").value = frameSeq[currentFrame]
currentFrame = (currentFrame+1)% frameSeq.length;
t = setTimeout("showNextFrame();" , 250);
}
function myStopFuntion()
{
clearTimeout(t);
}
Your call for myStopFunction is missing a C in function.
clearInterval(t);
is what is used to clear the timer for Javascript
myStopFunction is not getting called due to a typo in function name.
Replace function myStopFuntion() with function myStopFunction() .
Here is the running code:
<head>
<script>
function playAnimation()
{
frameStr = document.getElementById("frameArea").value;
if (frameStr.indexOf("\r\n") != -1) {
frameSeq = frameStr.split("=====\r\n");
} else {
frameSeq = frameStr.split("=====\n");
}
currentFrame = 0;
showNextFrame();
}
var t;
function showNextFrame()
{
document.getElementById("displayArea").value = frameSeq[currentFrame];
currentFrame = (currentFrame + 1) % frameSeq.length;
t = setTimeout(showNextFrame, 250);
}
function myStopFunction()
{
alert("Stopping Now");
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input onclick="playAnimation();" type="button" id="Play" value="PLAY" />
<input onclick="myStopFunction();" type="button" id="Stop" value="STOP" />
<textarea id="frameArea" cols="50" rows="30"></textarea>
<textarea id="displayArea" cols="50" rows="30"></textarea>
</form>
</body>
JSFIDDLE LINK: http://jsfiddle.net/52Nvj/4/

Categories

Resources