I have this field.
<input type="text" name="amount" id="amount" value="20.00">
I have this link.
<a target='_blank' href="https://PayPal.me/MyAccount/<span id='myspan'>0.00</span>">click here</a>
When I try to insert the amount value ($20.00) into myspan, I get this error:
"Uncaught TypeError: Cannot set property 'innerHTML' of null"
I'm using this Javascript that is at the bottom of the file.
<script type ="text/javascript">
window.addEventListener('load', function () {
myFunction();
})
function myFunction() {
var thisamount = document.getElementById("cart_total").value;
alert(thisamount);
document.getElementById("myspan").innerHTML = thisamount;
}
</script>
What the frig am I doing wrong?
Your anchor should look like this
<a target='_blank' id="myHref" href="#"><span id='myspan'>0.00</span>USD</a>
then
function myFunction() {
var thisamount = document.getElementById("cart_total").value;
alert(thisamount);
document.getElementById("myHref").href = `https://PayPal.me/MyAccount/${thisamount}`;
document.getElementById("myspan").innerHTML = thisamount;
}
You referenced cart_total but your field is named amount
A span inside of quotes is part of a textnode, it is no longer a separate DOM node
window.addEventListener('load', function () {
myFunction();
});
function myFunction() {
var thisamount = document.getElementById("amount").value;
console.log("thisamount", thisamount);
let url = `https://PayPal.me/MyAccount/${thisamount}usd`;
console.log("url", url);
document.getElementById("paypalLink").setAttribute("href", url);
}
<input type="text" name="amount" id="amount" value="$20.00">
<a id="paypalLink" target='_blank' href="https://PayPal.me/MyAccount/">Pay Me!</a>
the first thing you should declare the function before the call
<script type ="text/javascript">
function myFunction() {
var thisamount = document.getElementById("cart_total").value;
alert(thisamount);
document.getElementById("myspan").innerHTML = thisamount;
}
window.addEventListener('load', function () {
myFunction();
})
</script>
u can't add an element inside another element attribute
<a target='_blank' href="https://PayPal.me/MyAccount">
<span id='myspan'>0.00</span>
Another solution can be something like this (i put notes inside the snippet):
document.querySelector('#amount').addEventListener('change', function() { // add change event to the input in order to update the current href
document.querySelector('#sendMoney').setAttribute('href', 'https://PayPal.me/MyAccount/'+this.value+'USD'); // set the href
document.querySelector('#sendMoney').textContent = this.value+'$'; // set text content with current value
});
<label for="amount">Set amount</label>
<input type="number" name="amount" id="amount" value="20.00" />
<br />
<a id="sendMoney" href="https://PayPal.me/MyAccount/" target="_blank"></a>
Related
function check() {
var input;
input = document.getElementById("check_btwn");
if (!input.checkValidity()) {
document.getElementById("check_message").innerHTML = input.validationMessage;
} else {
document.getElementById("check_message").innerHTML = "OK";
}
}
<input type="number" name="" id="check_btwn" min="100" max="300">
<button type="button" onclick="check()">check</button>
<p id="check_message"></p>
Why .value is not used in input=document.getElementById("check_btwn");
but it’s still working?
With innerHtml what you do is that you add any html within an id, for Ex.
<span id="Test"></span>
<script>
document.getElementById("Test").innerHtml = <h2>This is a test</h2>
</script>
As you can se the span tag will have inside it a new tag that will be an h2, with some text in it, now with value there is a difference, because what value does is that it changes the value attr of a tag, for Ex:
<input type="text" id="Test2" value=""/>
<script>
document.getElementById("Test2").value = "i am the new value"
</script>
you can also find a good documentation in
Javascript innerHtml
javascript value
JS code
'use strict';
$(document).ready(function() {
});
function change() {
document.getElementById('the-name').innerHTML = document.getElementById('name');
}
HTML code
<p> What's your name? <input type="text" placeholder="Name" id = "name"></input></p>
<button id="button" onclick= "change(document.getElementById('name'))"> Answer </button>
<p>Hello <span id = "the-name"></span>,</p>
With the code above, I get the result in the title whenever I try to run it by clicking the button. Could someone point me to the right direction by telling me what I am doing wrong? Much appreciated, thank you!
Your problem is that you are assigning a HTMLInputElement to the innerHTML of your element instead of a text or a HTML content in the line:
document.getElementById('the-name').innerHTML = document.getElementById('name');
You need to get the input value:
document.getElementById('the-name').innerHTML = document.getElementById('name').value;
Demo:
'use strict';
$(document).ready(function() {});
function change() {
document.getElementById('the-name').innerHTML = document.getElementById('name').value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> What's your name? <input type="text" placeholder="Name" id="name"></input>
</p>
<button id="button" onclick="change(document.getElementById('name'))"> Answer </button>
<p>Hello <span id="the-name"></span>,</p>
You are assigning the whole HTML-Input Element to your <span>.
You have to use the value property of you HTML-Input Element to get its value.
document.getElementById('the-name').innerHTML = document.getElementById('name').value
Say I have this text box:
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
Could someone clear this up for me? Thanks.
Add an onclick to your button:
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}
Solution using onclick event:
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/
You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
Basically, you'd want to do the following:
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>
Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val() to get the text of the text box, and $("#txtDiv").text(txtToAppend) to append it to the div. Please look at the following code snippet for an example.
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>
HTML could be:
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>
I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
Assuming the HTML in the body looks like this:
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclick property, this can make your code more manageable in the long run.
This is the jQuery Version:
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.
Html input field is inside anchor tag like so ..
<a id="brand" onclick="myFunction()" class="brand" ><input id="mytext" onclick="myFunction()" type="hidden" value="Anchor Title">Anchor Title</a>
Javascript uses set attribute
<script>
function myFunction() {
document.getElementById("brand").innerHTML = "";
document.getElementById("mytext").setAttribute("type", "text");
var elem = document.getElementById("mytext");
elem.value = "Edit Title";
document.getElementById("brand").innerHTML = elem.value;
}
</script>
ACTUAL RESULTS
Anchor title is cleared on click
But, the input field is still hidden
Wanting To Achieve
Anchor title cleared on click
Input text field appears
User inputs text
Text from input becomes anchor title
Input field becomes hidden again
I think you should remove the line:
document.getElementById("brand").innerHTML = "";
(I don't know but maybe you delete the input element by that.)
Notice that when you do document.getElementById("brand").innerHTML = ""; you are deleting all things there are between <a id="brand"> and </a>, in this case the <input> line.
My solution:
<html>
<script>
function myFunction1() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "text");
elem1.value="Edit Title";
document.getElementById("mytext2").innerHTML = "";
}
function myFunction2() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "hidden");
document.getElementById("mytext2").innerHTML = elem1.value;
}
</script>
<a id="brand" onclick="myFunction1()" class="brand" >
<input id="mytext1" onchange="myFunction2()" type="hidden" value="Anchor Title">
<span id="mytext2">Anchor Title</span>
</a>
</html>
I am new to "html" and "Javascript".
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input type="text"
value="<script>document.getElementById("pid").innerHTML</script>"/>
How the code gets executed in the above case.
Looks like you are trying to set a value of the input field to be equal to the content of the pid paragraph. In this case you should set value property of the HTMLInputElement. You can get a reference to it using getElementById (there are many ways to get this element object) which you already know how to use. For example:
<p id="pid"></p>
<input type="text" id="input" />
<script>
var abc = "hello";
var pid = document.getElementById("pid");
pid.innerHTML = abc;
document.getElementById("input").value = pid.innerHTML;
</script>
the content of the 'value' attribute is just text, the browser will not interpret the JS code.
You can use the DOM instead:
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input id = "myInput" type="text" value="" />
<script>
document.getElementById("myInput").value = abc;
//OR : document.getElementById("myInput").value = getElementById("pid").innerHTML;
</script>
see : Accesing the javascript variable in html tag
I think you're trying to do this:
<script>
function myFunction(){
var abc="hello";
document.getElementById("pid").innerHTML=abc;
}
</script>
<p id="pid"></p>
<input type="button" value="Click Me" onclick="myFunction();" >