Finding a location of a string in another string using javascript - javascript

I want to write a code so a person can find the location of his birthday in the digits of pi.
So I tried to create a function which takes a string as input (by pressing a button), for example "0211" and the output should then be the location. Let's say 288. This is what I have done so far but it doesn't work. Any ideas? Thank you.
function myFunction() {
var str = "31415926...";
var n = str.indexOf("BIRTHDAY");
document.getElementById("demo").innerHTML = n;
}
<p>Click the button to enter your birthday.</p>
<button onclick="myFunction()">Type your birthday</button>
<p id="demo"></p>

Take a look at the following:
function myFunction() {
let input = document.getElementById('birthday').value;
let output = document.getElementById('demo');
let str = '34534536456336345634634563456';
output.textContent = str.indexOf(input);
}
<p>Click the button to enter your birthday.</p>
<label for="birthday">Enter birthday</label>
<input type="text" id="birthday">
<button onclick="myFunction()">get position</button>
<p id="demo"></p>

Related

I'm writing a javascript code to take two inputs from user and and check if letter is present in sentence.But the if block isn't being executed

This JavaScript code takes two inputs through user input scen and letter through HTML from. I want this code to be able to check if the sentence contains the letter, if yes then the sentence should be printed after the first coinsurance of the letter but this code is not working. I'm getting 0 as output every time.
function myFunction(){
var scen = document.getElementById('scen').innerText;
var letter = document.getElementById('letter').innerText;
let err = "No such letter found"
let result = scen.indexOf(letter);
var len = scen.length;
if(result>=0)
{
document.getElementById("demo").innerHTML = result;
document.getElementById("demo2").innerHTML = len;
document.getElementById("demo3").innerHTML = scen.substring(result+1);
}
else{
document.getElementById("demo3").innerHTML = err;
}
}
<!DOCTYPE html>
<html>
<body>
<p>Find a letter:</p>
<form id="chk" method="post">
<label for="scen">Enter a sentence</label>
<input type="text" name="scen" id="scen" placeholder="Enter a scentence"><br><br>
<label for="letter">Enter the letter you want to find</label>
<input type="text" name="letter" id="letter" placeholder="Enter a letter" min="1">
<br>
<button type="button" onClick="myFunction()">Check</button>
</form>
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
</body>
</html>
Try replacing Your line with
var letter = document.getElementById('letter').value;
The element with id letter is an Input, therefore to get the letter that user types in You need to use the value property
Additionally, I would recommend trying to debug the program. In this particular case, a couple of logs like console.log("Letter value is: ", letter) would surely help identifying the issue.

Add new user data to div

I am trying to learn JavaScript. I have a question which might sound silly, but I would really appreciate the help.
I have the following code:
JavaScript
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML = Name;
}
</script>
HTML:
<body>
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
</body>
I want to save every entry in of my textbox. Right If I am trying enter a new data input box, it replaces the previous data.
This will solve your problem;
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += Name;
}
</script>
notice the += instead of =;
it will get the previous value first, then add the new value to the end of it;
same as:
document.getElementById('result').innerHTML = document.getElementById('result').innerHTML + Name;
In your JavaScript code only the last attempt is saved. To save all the attempts try the following:
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += Name +'<br/>';
}
</script>
Every time button is clicked it will add new line symbol and new value to your result area, not relace previous try.

InnerHTML with value

I need a help on the below code. I need users enter their contents into placeholder, not in the script, so when the user click the button, the result can show up.
In this example, "my test.asp?name=ståle&car=saab" is the sample content, but I need to put them into placeholder, not in the script.
I change InnerHTML with value but it seems not working. Can anyone help? Thank you so much!
<body>
<p>Enter foregin character and click covert</p>
<input id="demo" placeholder="Keyword">
<button onclick="myFunction()">Convert</button>
<p id="demo"></p>
<script>
function myFunction() {
var uri = "my test.asp?name=ståle&car=saab";
var res = encodeURI(uri);
document.getElementById("demo").innerHTML = res;
}
</script>
You can set any value in the placeholder using script.
document.getElementById("xyz").placeholder = "Any value";
Check this out at:
http://www.w3schools.com/jsref/prop_text_placeholder.asp
<p>Enter foreign character and click convert</p>
<input id="demo1" placeholder="Keyword"> <!-- different id from <p> tag -->
<button onclick="myFunction()">Convert</button>
<p id="demo2"></p> <!-- different id from <input> tag -->
<script>
function myFunction() {
var uri = document.getElementById("demo1").value; // This was missing, get the value the user has typed
var res = encodeURI(uri);
document.getElementById("demo2").innerHTML = res;
}
</script>
See this JSFiddle

How do I pass HTML input text into a JS variable?

So I have been working on a game where you have a input that prompts the actions you make. So I need to be able to put in it a JS var so I can print the input text on the page and have the computer respond and manipulate it if needed. Does anyone have a way I can do this? I hope you can help.
here is what I have so far
<p style="font-size:33px; color:red;"> Trapped in a Room</p>
<hr/><br/><br/><br/><br/><br/>
<p id="comtxt">You wake up trapped in a room and need to find a way out.<br/>Use the input bar below as a action prompt.</p>
<p id="usertxt"></p>
<form script="answer();">
<input id="prompt" width="60" type="text">
<input id="sub" type="submit">
</form>
and then the javascript
var prompt = getElementById("prompt");
var comtxt = getElementById("comtxt");
var sub = getElementById("sub");
var usertxt = getElementById("usertxt");
var answer = function() {
usertxt = prompt;
}
sorry if the JS is hard to read...
var sender = document.getElementById("sub");
sender.addEventListener("click", setInputText, false);
function setInputText (){
var inpTxt = document.getElementById("prompt").value;
document.getElementById("usertxt").innerHTML = inpTxt;
};
Here the fiddle http://fiddle.jshell.net/7d8fH/8/

result of input box times 2 appears in window not div

I'm trying to get a text box where you can enter a number and then you click the button and it will multiply it by two and display that result in theDiv. Right now, it opens a new page for the result, and displays the entered number, not the number times two. What am I doing wrong? Beginner here, please be gentle! Thank you!!
<html>
<script>
function doubleit()
{
var theNumber=document.write(parseFloat(document.getElementById('theInput').value));
var doubleNumber =document.getElementById('theNumber')*2;
document.getElementById('theDiv').innerHTML(document.getElementById('doubleNumber'))
}
</script>
<body>
<p>Value: <input type="text" id="theInput" value="" size=10>
<input type="button" id="theButton" value="click me!" onclick="doubleit()"></p>
<div id="theDiv"></div>
</body>
</html>
It's the call to document.write that is replacing the page. Remove it:
var theNumber=parseFloat(document.getElementById('theInput').value);
When you want the value of a variable, you shouldn't use document.getElementById:
var doubleNumber = theNumber * 2;
innerHTML is a property, not a method:
document.getElementById('theDiv').innerHTML = doubleNumber;
var doubleNumber = Number(theNumber, 10)*2;
document.getElementById('theDiv').innerHTML(doubleNumber);
Something like this
function doubleit()
{
var theNumber=parseFloat(document.getElementById('theInput').value) * 2;
document.getElementById('theDiv').innerHTML = theNumber;
}
Try This Solution :
Use the id of your button to call the function to calculate result.
theButton.onclick = function doubleit()
{
//Simply get the number from user and parse it as float.
var theNumber=parseFloat(document.getElementById('theInput').value);
//Multiply it with 2
var doubleNumber =theNumber*2;
//Display the result in another div
document.getElementById('theDiv').innerHTML = doubleNumber;
}
Demo

Categories