InnerHTML with value - javascript

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

Related

Finding a location of a string in another string using 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>

Javascript Event Listener to change paragraph text onclick of button doesn't work?

The <p> text doesn't change when I click the button.
An alert message shows that output and text variables are correct. But still the Inner Text of <p> doesn't change.
Here's the HTML:
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
This is the JS:
function Message(){
var text = document.getElementById("msg").value;
var output = document.getElementsByClassName("msg")[0].innerHTML;
output = text;
}
You have to set the message directly onto the innerHTML property of the DOM node. Fixed example:
function Message() {
var text = document.getElementById("msg").value;
document.getElementsByClassName("msg")[0].innerHTML = text;
}
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
Your defining a variable output to the value of document.getElementsByClassName("msg")[0].innerHTML then you are changing the value of output to be the value of text.
Primitives in javascript are passed by value, not by references.
Change var output = document.getElementsByClassName("msg")[0].innerHTML;
to document.getElementsByClassName("msg")[0].innerHTML = text
If you say something like:
var output = document.getElementsByClassName("msg")[0].innerHTML;
The value of output will just be some kind of string or similar.
Then when you change that you just change the value of the string but not the element.
What you want to do is this:
var output = document.getElementsByClassName("msg")[0];
output.innerHtml=text;
function Message(){
var text = document.getElementById("msg").value;
document.getElementsByClassName("msg").innerHTML = text;
}
You were super close.
Remove the innerHTML from var output = document.getElementsByClassName("msg")[0].innerHTML;
and add it here:
output.innerHTML = text;
So it'll look like this.
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
<script>
function Message(){
var text = document.getElementById("msg").value;
var output = document.getElementsByClassName("msg")[0];
output.innerHTML = text;
}
</script>

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.

can i change html content using innerhtml in javascript without using a function?

The most basic example, where say I got a variable called name. What I want to do is to put the value of my tag paragraph to the name variable.
That is, I want the value of name change in html as soon as it is changed in JavaScript.
Btw, I created a refresh name method, which works perfectly, but I need a better alternative.
<html>
<head></head>
<body>
<script>
var droid = new Android();
var name = "Player";
function getName() {
name = prompt("Enter Name");
}
function putName() {
var elm = document.getElementById("ntag");
elm.innerHTML = name;
}
</script>
<p id="ntag"></p>
<input type="button" onclick="putName();" value="Refresh Name"/>
<input type="button" onclick="getName();" value="Change Name"/>
<br>
<input type="button" onclick="droid.dismiss();" value="Exit"/>
</body>
</html>
As I understand from you question, you want to minimize the number of buttons and event-handlers.
You are currently using two buttons to prompt for input and change the content. You can get rid of your putName function and the associated button for that and change the content within the first one itself.
You should ideally use innerText instead of innerHTML in this case.
You code will somewhat look like this snippet:
Snippet:
function getName() {
name = prompt("Enter Name");
document.getElementById("ntag").innerText = name;
}
<p id="ntag"></p>
<input type="button" onclick="getName();" value="Change Name"/>

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