javascript runs on w3schools.com but not on jsfiddle.net? [duplicate] - javascript

This question already has answers here:
Why this JSFiddle does not work [duplicate]
(1 answer)
jsFiddle: no connection between html and js? Can't call simple function from button? [duplicate]
(1 answer)
Closed 5 years ago.
ive used a basic example from w3schools.com to get here:
https://jsfiddle.net/02wu0v49/
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "aaaaaa";
document.getElementById("fname").value = "bbbbb";
alert("lala3");
}
<body>
<p>A function is triggered when the user releases a key in the input field. The function outputs the actual key/letter that was released inside the text field.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<p>My name is: <span id="demo"></span></p>
</body>
somehow the w3schools version works but it wont do anything on jsfiddle?
and it would be really nice to use [code][/code] or something to format code on stackoverflow...all those indents are terrible.

Change load type to No wrap in - <body>
Here is updated fiddle
Here is Docs

If you open the browser console in JS fiddle it lists the error. The HTML can't find the JS.

Related

calc is not defined at HTMLbutton.onclick [duplicate]

This question already has answers here:
Why does this simple JSFiddle not work? [duplicate]
(8 answers)
Closed 3 years ago.
I am beginner to JS and receiving error on this code.
I could not make it work and getting this error:
calc is not defined at HTMLButtonElement.onclick
Searching different stackoverflow questions and other sources online
<form>
Value 1: <input type="text" id="value1"> Value 2: <input type="text" id="value2">
<br/> Operator:
<select id="operator">
<option value="add">Add</option>
</select>
<button type="button" onclick="calc()">Calculate</button>
</form>
<input type="text" id="result"/>
JS Code:
function calc(){
var n1 = parseInt(document.getElementById('value1').value);
var v2 = parseInt(document.getElementById('value2').value);
var op = document.getElementById('operator').value;
if(op === 'add'){
document.getElementById('result').value = n1+n2;
}
I am getting the error I shared above in console.
JSFiddle
You're getting that error because the calc function is not defined when the HTML is rendered, therefore the onclick instruction can't point to it. Later on, when the user clicks on the button, the JavaScript engine notices that you're trying to execute an undefined function and throws an error.
You can solve this by registering the event listener after you define the function in your script, for example with this line (though things would be much better if the button also had an id):
document.getElementsByTagName("button")[0].addEventListener("click", calc);
For reference, see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

What is the difference between .getAttribute("name") and .name? [duplicate]

This question already has answers here:
getAttribute() versus Element object properties?
(7 answers)
Closed 5 years ago.
I have a simple web-application with an input text field in it looking like this:
<input id="txtip" type="text" value="10.1.1.50" />
The address 10.1.1.50 is a default value for an ip address. And from javascript I would read it like this:
txtip.getAttribute("value")
Now let's suppose to change it to 10.1.1.49. In google chrome the above javascript code will still return 10.1.1.50, while the expression
txtip.value
returns 10.1.1.49.
What is the difference? What is the "right way"?
var el = document.getElementById('testBox');
$(document).focusout(function () {
alert('el.value = ' + el.value);
alert('el.getAttribute("value") = ' + el.getAttribute('value'));
e.preventDefault();
});
<h2>Change value in the text box</h2>
<input id="testBox" type="text" value="original value" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Found this on web might help you try following code type something and focusout
The difference is that element.value is real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.
While getAttribute('value') will still show the original value="whateverWasHere" value.

Fiddle not working javascript [duplicate]

This question already has an answer here:
jsFiddle: no connection between html and js? Can't call simple function from button? [duplicate]
(1 answer)
Closed 8 years ago.
Why is the fiddle not printing in console:
HTML:
<input id="clickMe" type="button" value="clickme" onclick="validateEmail();" />
JavaScript
function validateEmail() {
console.log("ABC\n");
}
http://jsfiddle.net/amandeepautam/HKhw8/539/
Reference: Print Var in JsFiddle
Looks like there's an error in the script: "Uncaught ReferenceError: $ is not defined"
Seems you need to reference JQuery (its in "Frameworks & Extensions" dropdown)

javascript document.getelement not working [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I am very new to javascript. I am trying to place value on one input field. But it is not working, I don't know why..
document.getElementById("c_add").value='sssssss';
in the text area with id "c_add", I supposed that value will place as "sssssss", but it is not setting any value..
Full Code:
<body>
<script type="text/javascript">
document.getElementById("c_add").value='sssssss';
</script>
<textarea name="c_add" id="c_add"></textarea>
</body>
Did you tried do like this?
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>

Javascript's equivalent to "goto" [duplicate]

This question already has answers here:
How can I use goto in Javascript?
(16 answers)
Closed 8 years ago.
I'm programming a basic click counter for my site on a hidden Easter egg page when I encountered a problem I never had when programming web before: Does Javascript have an equivalent to other programming languages goto. The code is below, if anyone can make adjustments to it so that the displayed "clicks" are altered and do not remain at 0 while the variable itself if changed later in the code.
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<script>
document.write(clicks)
</script>
<br>
<button onclick ="clicks = clicks + 1">Click me</button>
</body>
</html>
What you want is to write and then repeatedly call a function. And you don't want that function to call document.write; you probably want it to append text to an existing DOM node.
I suggest picking up an introductory book on JavaScript.
Create the following html content:
<div id="myDiv"></div>
Also, after updating the clicks variable value, update the div content like this:
document.getElementById("myDiv").innerHTML = clicks;
Although I'm a novice at Javascript, I have experience with Python, Java and C++ and the only real GOTO alternative is a user defined function. In javascript, I believe it is just function functionname { code here }
No. Generally using goto statement is bad idea.
What you need to do is to write clciks to specific element each time when user clicks. Like this:
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<div id="myinfo"></div>
<br>
<button onclick="clicks = clicks + 1; document.getElementById('myinfo').innerHTML=clicks">Click me</button>
</body>
</html>
Also, you could use shorter command:
<button onclick="clicks = clicks + 1; myinfo.innerHTML=clicks">Click me</button>

Categories

Resources