Can anyone tell me why the code below doesn't seem to prevent the link from doing its thing? I know I can just use onclick="return false", but it should work with preventDefault, right? I tried onclick="function(e){this.preventDefault()}" and onclick="this.preventDefault()", but no love.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
Google Search
</body>
</html>
Remove function(e){. When you put function(e){} there, that means creating a function but not running it.
Demo: http://jsfiddle.net/DerekL/RnngR/
Do it like this:
Google Search
Related
I'm relatively new to PyScript and would like to run a function when a button is clicked.
However, no matter what code I try, it doesn't seem to work. The button is clickable but doesn't appear to do anything.
When I call the function manually (inside the py-script tag) it works fine.
Am I missing something?
Here's my code and thank you for helping:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Test</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<button id="test" type="button" pys-onClick="speak">run test</button>
<py-script>
def speak():
print("hello")
</py-script>
</body>
</html>
As it develops, some things in PyScript are moving targets. A couple of things about your code. First pys-onClick has been deprecated in favor of py-onClick in the more recent releases (including 'latest', which you use here). Second, to call the function from the button element, the syntax should currently read py-onClick="function()" (pys-onClick="function" did work in earlier releases). Finally, and I'm open to correction here, the 'print' method in your python code prints to the console (if you open the developer tools, you'll see it printed to the console each time you call the function). If you want the text to appear on the page, you'll need to write to the DOM. If I understand your intent correctly, this code will give you the result you're looking for.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Test</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<button id="test" type="button" py-onClick="speak()">run test</button>
<div id="display"></div>
<py-script>
def speak():
Element('display').write("Hello")
</py-script>
</body>
</html>
Keep in mind, as PyScript evolves, this syntax may not work with future releases as the developers and maintainers refine the framework. Unfortunately, there's not a lot in the way of documentation for PyScript yet. If you'd like to explore, you can find what documentation there is at https://docs.pyscript.net/latest/. For now, your best bet for guidance is taking a look at the examples at https://pyscript.net/examples. Cheers!
So I tried this answer to fetch an HTML document, but the issue I have is that I get the following: [object HTMLDocument].
What I want is to have the content of the HTMLDocument. Anyone knows how to do that?
Additionally, in my HTML module, do I need to create a new whole page like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
this is some html text that needs to be <em>emphasized</em>.
</body>
</html>
or can I simply put lines of HTML like this:
this is some html text that needs to be <em>emphasized</em>.
The answer to this might be quite easy but I couldn't find a solution since everything seems ok. I'm trying to create a google chrome extension and it has a button like this,
document.getElementById("autof").addEventListener("click", autofill());
function autofill() {
console.log("ENTER");
document.getElementsByName("session[username_or_email]").value = "sylent";
document.getElementsByName("session[password]").value = "abcdefg";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>TWITTER</h1>
<button id="autof">Fill</button>
<script src="twt.js"></script>
</body>
</html>
When you add the event listener to the button, you should pass in the function without actually calling it.
document.getElementById("autof").addEventListener("click", autofill);
Using parenthesis with autofill(), you are assigning the result of calling your function to the click handler:
document.getElementById("autof").addEventListener("click", autofill());
Try this:
document.getElementById("autof").addEventListener("click", autofill);
I'm trying to make a paging using this again. Mind you that I already tried this code line on a different project and it works flawlessly, but now it refuses to do anything when I click at it. All it did was refresh the page, there's no error in the console, there's no error on the code, there's nothing else I can think of.
<button class="page" onclick="window.location.assign('?PageGet=<?= $phpValue?>')">Go To</button>
The issue MUST lie elsewhere. If you consider this very basic emulation of your problem you will find that this works 100% OK
<?php
$phpValue='?ca=1&sc=2&st=3&p=4';
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
</head>
<body>
<button class="page" onclick="window.location.assign('?PageGet=<?= $phpValue?>')">Go To</button>
</body>
</html>
I am currently working on the beginning stages of js and trying to create buttons and alerts with it. when i write my code, the alerts work but my buttons are not appearing. when i inspect my webpage, the buttons dont even appear in the code. any suggestions on what i can do to fix this?
alertmessage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<script type="text/javascript" src="js/code.js">
</script>
</body>
</html>
code.js
window.alert("Welcome to Javascript");
buttons.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button 2">Click me.</button>
<script>
document.getElementbyId("button 2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>
</html>
well at first try not to use spaces when you create your buttons ids e.g (id="button 2")
instead use id="button2"
I modified your code adding the event listener on document ready find the below code hope that is what you are looking for, it should get your started.
Note: for posting here when you write your message paste your code under your message text and select the code then Press ctrl+K that should identify your code area then post it and all should work fine...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button2">Click me.</button>
<script>
$(document).ready(()=>{
document.getElementById("button2").addEventListener("click", function(){
alert("You have just clicked me!");
});
})
</script>
</body>
</html>