I'm trying to create a small RPG game.
But I keep receiving this error. I have my function (talk) defined. (activated by the talk button) Yet it says it's not defined.
<!DOCTYPE HTML>
<head>
</head>
<title> </title>
<body>
<script>
function talk() {
document.querySelector(".options").innerHTML = "<button onclick="fine()">I'm fine.</button>";
}
</script>
<div class="options">
<button onclick="talk()">Try it</button>
<button onclick="silent()">Stay Silent</button>
</div>
</body>
There's an error in the use of single and double quotation. Here's the fix:
function talk() {
document.querySelector(".options").innerHTML = "<button onclick='fine()'>I'm fine.</button>";
}
After doing this you'll get "fine is not defined". So you'll need to do something like this:
function fine(){
alert('I am fine');
}
Anyway, I don't get why are you trying to do this, but hope it helps!
Related
I have got stuck to this small thing.
<!DOCTYPE html>
<html>
<head>
<script>
function cnfm(){
var r = window.confirm("hey");
}
</script>
</head>
<body>
<button onclick="cnfm">here</button>
</body>
</html>
Whenever I am pressing on the button, no action.
You should call your method with paranthesis, <button onclick="cnfm()">here</button>
try for best practice and clean code like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='btn'>here</button>
<script>
let btn = document.querySelector('#btn')
btn.addEventListener('click', ()=>{
let r = window.confirm("hey");
})
</script>
</body>
</html>
this is modern javascript. now your confirm work. if user click of OK then r is equal true and if click on CANCEL thats be false.
My sticking point is how to create two buttons and identify them separately within JS?
What the lecturer asks for in the image to create two buttons and two click functions.
My HTML code with the script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Popup Boxes Lesson</title>
<body>
<button onclick="Enter Name">Click here for a popup alert</button>
</body>
<script>
function myFunction() {
alert("Enter your Name");
}
function myFunction(){
alert("Generate Greeting");
}
</script>
</html>
First of all create two different functions with different names.
Then you can use them with onclick
OR
Give them id and then use document.getElementById("id") to assign the click event on it. Something like this
<body>
<button id="foo">Click here for a popup alert</button>
</body>
<script>
document.getElementById('foo').onclick = function(){
prompt('Hello world');
}
</script>
There are several problems with your code:
First the click event you assigned to the button does not match the function you created.
Second don't create two functions with same names
The code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
</head>
<body>
<button onclick="myFunction()">
Enter your name
</button>
<button onclick="generateMessage()">
Generate Message
</button>
<script>
function myFunction(){
var message = prompt("What is your name?");
}
function generateMessage(){
alert("Hello " + message);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Question 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
</head>
<body>
<button onClick="myFunction()">Alphabetical order</button>
<button onClick="countFunction">Count</button>
<p id="i"></p>
<p id="ii"></p>
<script>
var products = ["Printer", "Tablet", "Router", "Keyboard"];
document.getElementById("i").innerHTML = products;
function myFunction() {
products.sort();
document.getElementById("i").innerHTML = products;
}
function countFunction() {
document.getElementById("i").innerHTML = products.length;
}
</script>
</body>
</html>
I think it's just a spelling or formatting error. If you can change the code as little as possible while still fixing it I would appreciate it a lot. If you need any more details please just ask. I would be happy to provide as much information as I can to help you help me.
This is for my son - he loves traffic lights!
Modify these lines:
<button onClick="myFunction();">Alphabetical order</button>
<button onClick="countFunction();">Count</button>
Set type of buttons to button. Default type is submit so on
clicking your function doesn't execute and page is submitted.
onClick should be onclick.
You are missing () after countFunction so add () at end of
countFunction
<button type="button" onclick="myFunction()">Alphabetical order</button>
<button type="button" onclick="countFunction()">Count</button>
You missed the brackets inside the second onclick attribute:
<!DOCTYPE html>
<html>
<head>
<title>Question 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
</head>
<body>
<button onClick="myFunction()">Alphabetical order</button>
<button onClick="countFunction()">Count</button>
<p id="i"></p>
<p id="ii"></p>
<script>
var products = ["Printer", "Tablet", "Router", "Keyboard"];
document.getElementById("i").innerHTML = products;
function myFunction() {
products.sort();
document.getElementById("i").innerHTML = products;
}
function countFunction() {
document.getElementById("i").innerHTML = products.length;
}
</script>
</body>
</html>
Now if you use the code, the first button will sort the array into alphabetical order and the second one will display the number of values, hope this helps :)
Modify this:
countFunction changed to countFunction()
See here for a working version: https://jsfiddle.net/BrechtDeMan/hzg4zefb/
1. Add brackets to the function call in the onclick= bit
I.e. <button onClick="countFunction()">Count</button> instead of <button onClick="countFunction">Count</button>.
2. Get the right HTML element
Your code now has
document.getElementById("i").innerHTML = products.length;
meaning the array is then replaced with the number '4'.
Presumably you want
document.getElementById("ii").innerHTML = products.length;
so that the output is
Printer,Tablet,Router,Keyboard
4
3. Best practices
This will change your code as little as possible, like you asked.
However, there are other improvements that might improve the style of your code.
Technically the code works like this (barring compatibility issues I'm not aware of - it works for me).
I use mvc5. Do not include jQuery in test.
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
#RenderBody()
</body>
</html>
Test.cshtml:
<script type="javascript/text">
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
In result I have an error: ReferenceError: myFunction is not defined
and the result code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
<button onclick="myFunction();">Click me</button>
<script type='text/javascript' >
(function($){
function myFunction() {
alert("I am working");
};
})(jQuery);
</script>
</body>
</html>
I have read a lot about this error and have not founded the answer. Could you clarify, who wrap JavaScript code? Is there any flag to cancel it? Is there any other way to resolve the problem?
Something (probably MVC5) is wrapped your code for you, but with good reason. Putting onclick handlers on elements pointing at a globally declared function is how JS was written in the '90s.
To resolve it, put an id attribute on your button and remove the inline event handler:
<button id="mybutton">
and then use jQuery to register the event handler:
$('#mybutton').on('click', function () {
alert("I am working");
});
or, since you mentioned in later comments that you have a loop generating these elements, use a class and a data- attribute instead:
<button class="myclass" data-id="...">
with code:
$('.myclass').on('click', function() {
var id = $(this).data('id');
...
});
<script>
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
This will work. cheers
html embedded with javascript
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
have I called this function correctly????
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
is there something wrong here???
function saysomething()
{
alert("I am 28 years old");
}
</script>
<body>
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Here is the full example.
This will work for sure.
Test it if you want.
Copy and paste the below code into W3Schools test environment, "Edit and Click me" to test.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
function saysomething()
{
alert("I am 29 years old");
}
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
</script>
<body onload="displayatts();">
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Your script runs before the document is parsed.
Therefore, getElementById returns null.
Move the <script> to the bottom.
"have I called this function correctly????"
You haven't called the displayatts() function at all. Add the following to the end of your script:
window.onload = displayatts;
That way displayatts() will be called automatically once the page finishes loading. It will, in turn, setup the click handler on your button.
Also, include the closing </head> tag just before the opening <body> tag.
Demo: http://jsfiddle.net/nnnnnn/rxDXa/
window.onload = displayatts;
Paste this code before </body> tag in your page.So you can be sure if element is null or not or the code is try to work before your html element is rendered.
Hope this helps your situation..
<script>
var element = document.getElementById("buttonone");
if(element){
element.setAttribute("onclick", "saysomething();");
}else
{
alert("element null, move the code to bottom or check element exists");
}
</script>