how to control tab key between buttons in react, javascript? - javascript

I have 3 buttons Cancel, Back, Continue respectively. when press tab key that should be going to Continue, Cancel, Back buttons. How can we do that in React, Javascript?
Please refer https://codesandbox.io/s/crazy-ishizaka-cnr5k?file=/src/App.js
export default function App() {
return (
<div className="App">
<button tabIndex="2">submit 1</button>
<button tabIndex="3">submit 2</button>
<button tabIndex="1">submit 3</button>
</div>
);
}
this above code is'nt working as I expected. Please suggest efficient solution for this.

The first thing about the tabIndex is it would act weird for use if you want to jump directly to the buttons and inputs.
After some researches about your problem, I have found out you have to do two things:
The first one is you have to add all:initial to the root in your project style. for example in your case that the project is React, you have to add this to the index.html and change that like this:
<!DOCTYPE html>
<html lang="en" style="all: initial;">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
I have changed the HTML tag and added the style in the second line
the second thing that you have to d is that you need to consider a side for the buttons that the index can go through it at first and then it can follow your order.
in my case, I have added this: (and know that the first tab would do nothing)
export default function App() {
return (
<div className="App" tabIndex={1}>
<button tabIndex={3}>submit 1</button>
<button tabIndex={4}>submit 2</button>
<button tabIndex={2}>submit 3</button>
</div>
);
I have forked your codesandbox and you can access it with this link:
https://codesandbox.io/s/dawn-hill-1br66?file=/src/App.js

Related

The popstate event is not firing even after pushing state using pushState() when the user clicks a button

I have been willing to try implement Client Side Routing, hence this question,
as I was testing the popstate event and the pushState function of the history
object.
Now, here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<button id="navigate">
Navigatin Test Button
</button>
<script type="module" src="/main.js"></script>
</body>
</html>
There I added a button which when clicked will push some state to the History.
I know that a browser will not allow non-interactive pushStates initially,
hence I added the button to test it from the perspective of the User.
Here is the javascript:
let NavigationButton = document.getElementById("navigate")
//this part is not working for some reasons.
window.addEventListener("popstate", event => {
console.log(event.url) //must show something when clicked
})
NavigationButton.addEventListener("click", () => {
console.log("Clicked!") //this is working as expected
window.history.pushState({ url: "/url"}, "", "/url")
})
I created this project using Vite, and I have used the vanillaJS template
with default settings and no modifications whatsoever.
I have searched through the internet but this exact problem does not exists anywhere.
If you want to recreate the problem, simply create a vite project using
VanillaJS and nothing, and replace the index.html with the html I have gotten
and replace the main.js with the javascript mentioned above

Calling py-script function from button-click with "pys-onClick=..." doesn't work?

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!

How to log HTML input field data to the console? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Here's what I have so far:
document.querySelector('.check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC" </head>
<body>
<main>
<h3>Enter your height in metres.</h3>
<input type="number" class="height" />
<h3>Enter your weight in kilograms.</h3>
<input type="number" class="weight" />
<div>
<button class="btn class">Calculate my BMI!</button>
<p id="bmi"></p>
</div>
</main>
</body>
</html>
Nothing happens in the console when I enter a height and click the button. Basically, I'm aiming to build a metric BMI calculator. As a first step, I'm trying to log to the console the value that the user inputs for "height". I don't really understand why this doesn't work, and I think I'm missing something. Could someone please help?
Your code throws an error on the console on the line:
document.querySelector('.check').addEventListener('click', function() {
because the querySelector('.check') call can't find any elements with class check and so returns null. To fix this you could add a check class to your button:
document.querySelector('.check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC" </head>
<body>
<main>
<h3>Enter your height in metres.</h3>
<input type="number" class="height" />
<h3>Enter your weight in kilograms.</h3>
<input type="number" class="weight" />
<div>
<button class="check btn class">Calculate my BMI!</button>
<p id="bmi"></p>
</div>
</main>
</body>
</html>
You should be giving the same class in the button which you have used in code or it is always best to give id when we are handling events.
document.querySelector('#check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
//Replace you button code with below
<button id="check" class="btn class">Calculate my BMI!</button>
or
document.querySelector('.check').addEventListener('click', function() {
console.log(document.querySelector('.height').value);
});
//Replace you button code with below
<button id="check" class="btn class check">Calculate my BMI!</button>
Just a lil problem there mate.
document.querySelector('.check')
But, there is no element with the class check so the EventListener doesn't even get attached to the button. This will solve it.
<button class="btn class check">Calculate my BMI!</button>

Import class from module without ES6

I am attempting to use Material's snackbar with ES5 JavaScript. By doing this, I can't use ES6's import functionality. Therefore, I am referencing the CSS file and JS file through link href='...' and script src='...'.
When declaring a variable with var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar')), I receive the error:
Snackbar.aspx:722 Uncaught ReferenceError: MDCSnackbar is not defined
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../_catalogs/masterpage/Custom/snackbar/node_modules/#material/snackbar/dist/mdc.snackbar.min.css">
<script src="../_catalogs/masterpage/Custom/snackbar/node_modules/#material/snackbar/dist/mdc.snackbar.min.js"></script>
</head>
<body>
<div class="mdc-snackbar">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label" role="status" aria-live="polite">
Can't send photo. Retry in 5 seconds.
</div>
<div class="mdc-snackbar__actions">
<button type="button" class="mdc-button mdc-snackbar__action">Retry</button>
</div>
</div>
</div>
</body>
<script>
var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
</script>
</html>
How can I 'import' MDCSnackbar without using ES6's import functionality?
You could use the CDN version maybe as explained in their docs Material-ui cdnhere is the github example of the material-ui cdn example.

on click of folders should be inserted into the text box using node.js and jQuery

I'm trying to create a file browser app.Here on click of a folder should be inserted into the text box provided.
Suppose if I click on app folder,I want the /app folder to be inserted into the provided text box.I've followed this URL in order to make this file browser app.
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
Can anyone please suggest me regarding this issue ...
Since you're using jquery already I would say the easiest would set the jquery event click for the folders to select the text input element and use the .val () function to set your new value so it would look something like this
$(".folder selector").click (function (){
$(".textbox selector").val ("/"+this.text());
});
I'm not sure if the value function works on input elements but if not you could change it to a <textarea></textarea>

Categories