This question already has answers here:
How to display JavaScript variables in a HTML page without document.write
(9 answers)
Closed 8 years ago.
Hi I'm working on a personal website and trying to make a comment box.
its still very basic but I have a button that calls a function which stores the values of the name of the person and the comment itself, and then hopefully output it somewhere (I don't care where yet, just want to see an output)
this is a snippet of what I got so far but its not doing anything, and I don't know what I'm doing either ;) so please rescue me
<section class="body_right_comment_input">
<p> Name: </p>
<input type="text" id="name_input"/> </br>
<p> Comment:</p>
<textarea id="comment_input"></textarea>
<button onclick="myFunction()">Click me</button>
</section>
<script type="text/javascript">
function myFunction() {
var commentName = document.getElementById("name_input").value;
var commentValue= document.getElementById("comment_input").value;
document.write(commentName)
document.write(commentValue)
}
</script>
To output something to somewhere in your HTML, you can use innerHTML, which is like this:
document.getElementById('myAnchor').innerHTML="W3Schools";
User innerHTML to output: http://jsfiddle.net/z4hjv/
<section class="body_right_comment_input">
<p>Name:</p>
<input type="text" id="name_input" />
</br>
<p>Comment:</p>
<textarea id="comment_input"></textarea>
<button onclick="myFunction()">Click me</button>
<span id="comment_result"></span>
</section>
function myFunction() {
var commentName = document.getElementById("name_input").value;
var commentValue = document.getElementById("comment_input").value;
document.getElementById("comment_result").innerHTML = commentName + commentValue;
}
FALSE ALARM! my closing bracket was in the wrong place for the function!
However, feel free to answer and suggest a better way to do this or how I can output this into the html itself
Related
so I'm kind of a beginner at JavaScript and APIs, things like that. I want to implement an API into my website that can detect whether an article is fake news or not based on the title. I already found the API, which is this, but I'm a bit confused with how to retrieve the form value from my HTML code, shown below:
<input type="text" name="check" id="check">
<button onClick="checkFakeNews" id="btn">Check</button>
<p id="result"></p>
I already tried typing up this function:
function checkFakeNews() {
document.getElementById('check') = text
console.log(text)
}
to try to print out the value, but I didn't get anything.
I also want to get the result, stored in 'data' in the API I believe, and display it in the paragraph. I'd be very grateful to anyone who can help me!
Firstly, You are you writing document.getElementById('check') = text which doesn't do anything.
Second thing that in HTML onClick need to be equal to Function Call you are passing just the Name. You need checkFakeNews() instead of checkFakeNews
This should work as required.
function checkFakeNews() {
const input = document.getElementById('check');
const text = check.value;
console.log(text);
}
<input type="text" name="check" id="check">
<button onClick="checkFakeNews()" id="btn">Check</button>
<p id="result"></p>
https://www.javatpoint.com/document-getElementById()-method , and see https://www.w3schools.com/jsref/prop_text_value.asp
var s = document.getElementById("element").innerHTML; //to set
document.getElementById("myText").value = "Johnny Bravo"; to set
This question already has answers here:
Difference between ".innerHTML" and ".value" in JS
(4 answers)
Closed 4 years ago.
I know there is something wrong with my code and seeing as this is my hello world project I am very confused. I have read other posts but nothing will work. Can somebody make this work for me??.
The HTML
<html>
<head>
<link rel="stylesheet" href="game.css">
</head>
<body onload="startgame()">
<div id=content>
<center>
<div id=pricediv>
<p id=price></p>
</div>
<div id=buysell>
<button class=buy>Buy</button>
<button class=sell>Sell</button>
<button onclick="startgame()">Start</button>
</div>
</center>
</div>
</body>
The JavaScript
var paused = "false";
function startgame() {
while (paused === false) {
var price = Math.round(Math.random());
document.getElementById("price").innerHTML = price;
}
}
<p> tags don't have value.
Use innerHTML instead.
Also "price" will display word price instead of variable, so drop the quotes:
document.getElementById("price").innerHTML= price
Use .innerHTML instead of .value.
.value is used to set the value of an input element, ie. <input> or <textarea>.
.innerHTMl is used to set the string value in between a html tag, ie. <h1>, <p> or <div>.
This question already has answers here:
val() vs. text() for textarea
(2 answers)
Closed 4 years ago.
Not a duplicate question; so please consider the content closely before presumption.
I've been using JQuery for years and have never seen this type of behavior before. Consider the following:
<html>
<div class="order-form-group">
<label class="order-form-label" for="guestSpecialInstructions">Special Instructions:</label>
<textarea class="order-form-textarea" id="guestSpecialInstructions" type="text"></textarea>
</div>
<div class="order-form-group">
<label class="order-form-label" for="guestReason">Reason:</label>
<textarea class="order-form-textarea" id="guestReason" type="text"></textarea>
</div>
<div class="button-container">
<input class="order-form-submit" type="submit" value="Submit">
</div>
</html>
I've observed that the following script in some instances will return 'undefined' even when "all" the more obvious reasons have been eliminated. Such as
having the incorrect selector, having more than 1 id on the page and etc.
<script>
var specInstr = $("#guestSpecialInstructions").val();
var guestReason = $("#guestReason").val();
</script>
I spent literally hours attempting to determine what the disconnect was; stripping my code to the simplest basic level and couldn't find any reasonable explanation for the behavior.
The code is contained within a simple HTML page; nothing fancy and references the JQuery repository https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
I have another project which runs in an aspx page, still the markup is identical and the .val() method works without issue.
After hours of hitting a wall I ran across the post at JQuery: .val() is not working for textarea and someone else attesting to the exact same issue using valid code and the suggestion was:
<script>
var specInstr = $("#guestSpecialInstructions")[0].value;
var guestReason = $("#guestReason")[0].value;
</script>
Then the issue is automagically resolved. Only problem I have with this is that there no one seems to have answered the question of why the JQuery .text() method sometimes return undefined when all aspects of the code is valid.
Resolutions are great but without understanding why the issue exists, really gains nothing intellectually.
If I need to change the wording of the title, let me know.
You can only use text() on a <textarea> if it is pre-populated and to return the original content
Any changes to the content by user or setting new value programatically will not alter what is returned by text() as it will always be the original pre-pre-populated content
Always use val() to get and set
var $txt = $('textarea')
console.log('text() Original content:', $txt.text())
console.log('val() Original content:', $txt.val())
$txt.val( 'Some new content')
console.log('text() after value change:', $txt.text())
console.log('val() after value change:', $txt.val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="one" type="text">
Original text
</textarea>
I was making an HTML code editor, I tested all of the HTML tags I know and they all work, except for script tags.
When I type <script>something</script> into the text area and click a button, the script doesn't execute.
Please help! Here is the code:
<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<button type="button">Run Code!</button>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here is the working code:
<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
<br/>
<button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here's a link to the JSFiddle: http://jsfiddle.net/Q2qLF/. I've removed some broken HTML, such as; a button shouldn't be contained in a anchor tag, I've added a 'onclick' in your button that will call the 'makeCode()' function and I've added the 'type="text/javascript"' into your script tag as this maximises compatibility.
Please let me know if you need any more help
I've updated my JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/
Now there are 2 textareas, one for the HTML and one for the Javascript. i've also created a new function called 'makejs', this takes the value of the Javascript textarea and runs it through a 'eval' - this executes the Javascript passed to it.
I've put the answer in a Fiddle here: http://jsfiddle.net/joshnicholson/P8eh9/
I'm not sure why you're wrapping the button element inside an anchor, but I would do it a slightly different way.
Here is the revised javascript:
var myButton = document.getElementById("btnRunCode");
myButton.addEventListener("click", makeCode);
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
I added an id of "btnRunCode" to your button element, just to make things easier for me. See the Fiddle.
I'm trying to take user form input and display it back to the user, among other things (all of which require the input being stored as a JS variable).
I'm trying to spit it out in an alert, as a quick feedback loop, and all I keep getting is [object HTMLInputElement]. I've tried to use document.forms[0] and document.getElementById (like below) and neither work. Also, I'm using bootstrap typeahead, could that be complicating this issue?
What am I missing?
Here's the code:
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
<input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
<script language="JavaScript" type="Text/JavaScript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1>Input:
<script language="JavaScript" type="Text/JavaScript">
document.write(theInput.value);
</script>
</h1>
Edit: PART II, now the code works for the alert, but I need to use it elsewhere (like I said) and the variable isn't available in other sections of the html. Above, I'm just trying to get it to display that same value as a part of the html. It could be my JS, but this is pretty boilerplate stuff, so I think it's related to the location of the variable.
What do I need to do use it elsewhere? I've added the next div above to show what I'm trying.
--left an extra declaration of the variable in part II by accident, was one of the tests I was trying, removed now.
Right now, the object you're alerting is an HTML element, not a string. You can get its value using the value property:
alert('you chose ' + theInput.value)
(Note that you probably didn't mean:
var theInput = document.getElementById('txtvarInput').value;
As other answers suggest, because that would give you an empty string. It's only read once.)
You are trying to output the entire HTML-object that you have selected, not the value-property of it. Since alert() expect a string, JavaScript gives you the string representation of that object which is [object HTMLInputElement].
Try this instead:
var theInput = document.getElementById('txtvarInput').value;
var theInput = document.getElementById('txtvarInput');
should be
var theInput = document.getElementById('txtvarInput').value;
In the alert, use
theInput.value
You need to use the value property:
var theInput = document.getElementById('txtvarInput').value;
You forgot .value
Something like:
document.getElementById('txtvarInput').value
You are going to print the value of the input at the page load time. You will get an empty alert.
just do this!
<input name="submit" type="submit" class="btn" value="Select" onclick="alertVal()"/>
<script language="JavaScript" type="Text/JavaScript">
function alertVal(){
var theInput = document.getElementById('txtvarInput').value;
alert('you chose ' + theInput);
}
</script>