Cannot push value to second output field - javascript

I just finished the W3 Schools certification course on JavaScript.
Can somebody explain why the returnValue() function works for the inField element, but not for the output element.
I'm guessing I have to create a variable and then reference the variable with the output element. Even if that is the solution I'd like to understand the logic behind this necessity.
Any assistance is appreciated.
HTML
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id='output'>Output: </div>
<div> Enter a value: <input type="text" id="inField"> </div>
<button onclick="returnValue()" id="submit">Submit</button>
</body>
</html>
JavaScript
function returnValue() {
document.getElementById("inField").value="Test";
document.getElementById("output").value="Test";
}

Related

javascript and html with brackets

this is most likely a no brainier, but i have Brackets as a codding environment if you will, i think it covers like 30 langues or something crazy like that, and well i understand you need sorts of compilers and what not, but here im trying to add some javascript to some html externally, and i kinda plucked some code off the internet to make sure my test code wouldn't have any issues. any ways the real question is , do i need a compiler of sorts for java, if that's stupid (because i think it can be done with notepad honestly) then please take one sec to look at my code and tell me what i might be doing wrong, because i really try to be simple with my tests
THE HTML
<!DOCTYPE html>
<html>
<head>
<Title>Lets Do Something</Title>
<link rel="stylesheet" href="Index.css"/>
<script src="Index.js"></script>
</head>
<body>
<form>
<input type="text" name="inputbox" value=""><p>
<input type="button" name="button" value="'Click" onclick="testresults(this.form)">
</form>
</body>
</html>
THE JAVASCRIPT
function testResults (form) {
var TestVar = form.inputbox.value;
alert ("You typed: " + TestVar);
}
in fact, Below is the site i got it from, but changed from internal script to external scripting
https://www.javaworld.com/article/2077176/scripting-jvm-languages/using-javascript-and-forms.html
Any help would be great, thanks Bunches.
First of all, this is JavaScript and not JAVA. They are not the same.
In the code you posted, there is a small error that is causing the issue.
Replace onclick="testresults(this.form)" with onclick="testResults(this.form)".
Note that I have camel cased the testResults function name. This should give you the results.
function testResults(form) {
var TestVar = form.inputbox.value;
alert("You typed: " + TestVar);
}
<!DOCTYPE html>
<html>
<head>
<Title>Lets Do Something</Title>
<link rel="stylesheet" href="Index.css" />
<script src="Index.js"></script>
</head>
<body>
<form>
<input type="text" name="inputbox" value="">
<p>
<input type="button" name="button" value="'Click" onclick="testResults(this.form)">
</form>
</body>
</html>

simple javascript example not working

I am learning javascript and i can't manage to make this work, an alert message should appear when i click the submit button
Html
<html>
<head>
<title>Understanding the Document Object Model</title>
<script type="javascript" src="script.js"></script>
</head>
<body>
<h1 id="title">Understanding the Document Object Model</h1>
<p id="first">This is the first paragraph</p>
<p id="second"><strong>This is the second paragraph</strong></p>
<p id="third">Third paragraph</p>
<input type="submit" id="clickMe" value="Click Me"/>
</body>
</html>
Javascript script.js
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
Your type attribute is wrong.
It should be "text/javascript"
It works fine for me after making that change
==================================
EDIT:
As a note, my debugging process was to try invoking the alert() directly in the script. script.js became:
alert("running the example");
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
That was triggering the alert either, which says that the whole script isn't in play. So it must be the invocation of the script that's the problem.
Once you've determined that, there aren't many things left to check.
<script type="text/javascript" src="script.js"></script>
You change your external javascript file link like this. Because,type attribute of script tag should come as text/javascript

Not get javascript value in angular model

I am trying to change my textbox value after click on a button using javascript and change ng-model value of angular js.
The Javascript code working fine and change the textbox value, but I also want to change my ng-model value according to the text box.
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<script>
function tryi()
{
document.getElementById('newtry').value="any value";
}
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" id="newtry">
<input type="button" onclick="tryi();"value="click here">
<hr>
<h1>Hello {{yourName}}!</h1><hr>
</div>
</body>
</html>
I think you have included angular-resource and not included angularjs
add this line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
the code is working fine
Here is the plunkr link: http://plnkr.co/edit/CPX1Mhn2CkmY6wZWHvya?p=preview

Javascript document.getElementById issue

I am a beginner to javascript, and am trying to learn how to use text boxes because I can't seem to find a page that is simple enough for me. This is what I have, but when I click the button, it just returns [object HTMLInputElement]. Could someone please tell me what i did wrong and help me fix it? Thanks.
<html>
<head>
<script language="javascript">
function displaynumber(){
var number1= document.getElementById("num1");
alert(number1).value
}
</script>
<title>
ok
</title>
</head>
<body>
<form>
Input the first number<input type="text" id="num1">
<input type="button" value="submit" onClick="displaynumber()">
</form>
</body>
</html>
You should correct your typo:
alert(number1).value
to
alert(number1.value)
You are alerting number1 and then trying to read the value property of the return value of alert().
Move the property accessor inside the function call.
alert(
number1.value
);

Display FCKeditor input data in HTML format on same page, as user types?

I am currently playing around with the FCKEditor, and I am trying to replicate how stack overflow shows exactly how your post will look in HTML as you type it up. My FCKEditor creates just fine, I just don't know how to go about accessing the editor data once it is created. What I want to do is get the html from the editor and then put it into the <p id="inputText"></p>. Trying to access it with jQuery using $("#fckEdtr") doesn't work, which I expect is because it's created on the fly with javascript. I am aware of the IsDirty() method in the FCKeditor JavaScript API, I just haven't seen any solid examples of how to get the current instance of the editor and use the method. Can anyone help? My code is below:
<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...code to output editor data as user types
});
</script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
I just found the answer to this in another question on SO:
How can I enable live preview for FCKeditor in an ASP.Net site?
Also, when I use a div element instead of a paragraph element, it works. Here's my final working code for anyone it might help:
<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
function FCKeditor_OnComplete( oFCKeditor )
{
oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("postText").innerHTML =
oFCKeditor.GetHTML(true);
}) ;
}
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Custom' ;
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
It's good that you found the answer already, but I wonder why do you need preview window when you are dealing with WYSIWYG editor. My guess is that the look you are getting in the editor is different from the resulting look because of CSS applied to the latter. If I am wrong, disregard the advice that follows.
If that is the case, you may think of copying the most relevant parts of your CSS to \fckeditor\editor\css\fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you do want the difference. For example, spoilers should be hidden when posted but visible in the editor.

Categories

Resources