I have wrote some basic HTML with some CSS and JavaScript. The code asks the user to enter a password and the Javascript verifies the password and alerts the user the required info. This code functions properly on my desktop but as soon as I add the files to my Samsung Tablet only the HTML appears. The code I'm using is as follows. Currently running all files out of same fodler but would like to move main HTML to tablet Home and leav CSS and Javascript in another location but still be referenced.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dowlingcss.css"/>
<title>
Dr. Dowling
</title>
</head>
<body>
<script src="dowlingjs.js"></script>
<img src="parasol.jpg" alt="Parasol Logo" height="250" width="750">
<h1>Welcome Dr. Dowling</h1>
<p>What is the answer?</P>
<form>
<input id="pass">
<button type="button" onclick="myfunction()">Login</button>
</form>
</body>
</html>
Javascript
function myfunction()
{
var x, text;
//Get the value of the input field with id="pass"
x = document.getElementById("pass").value;
var password = x.toLowerCase();
// If x is Not = to fatluke
if (password != "fatluke")
{
alert("incorrect");
}
else {
alert("The CD is in room 125 under the bed");
}
}
Add your code in this block of code for running and check after page load
window.onload = (function () {
// insert your code here
});
also, try with "window.getElementById()", I think it depends on your browser and version of web view on your tablet.
Related
I am quite new to Javascript and HTML.
As a part of learning, I am working on a public visualization. (https://public.tableau.com/views/Superstore_24/Overview).
What I'm trying to do:
Specify a region.
Initialize the visualization after applying a filter based on region.
Display the Tableau visualization.
The challenge:
The code works when the user input is a word without spaces (Eg: "Washington").
It also works for multiple single-word filters (Eg: "Washington,Oregon").
However it fails when the input is a word with a space (Eg: "West Virginia").
The particular snippet where I am taking input and sending it to the visualization is as follows:
function show() {
State = document.getElementById("Region").value; //variable to store user input
document.getElementById("Showviz").innerHTML =
`
<h3>Your visualization: ${State} </h3>
<tableau-viz
id="tableauViz"
src="https://public.tableau.com/views/Superstore_24/Overview"
device="phone"
hide-tabs
>
<viz-filter field="State" value=${State}></viz-filter>
</viz-filter>
</tableau-viz>
`;
}
This is a weird problem, and I would really appreciate help on it.
Attaching the full code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Viz</title>
</head>
<body>
<script
async
type="module"
src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"
></script>
<!-- Custom script starts here -->
<script>
var State;
function show() {
State = document.getElementById("Region").value; //variable to store user input
document.getElementById("Showviz").innerHTML = `
<h3>Your visualization: ${State} </h3>
<tableau-viz
id="tableauViz"
src="https://public.tableau.com/views/Superstore_24/Overview"
device="phone"
hide-tabs
>
<viz-filter field="State" value=${State}></viz-filter>
</viz-filter>
</tableau-viz>
`;
}
</script>
<input
id="Region"
type="text"
placeholder="Please enter your State"
style="width: 500px"
required
/>
<button type="button" id="change" onclick="show()">Click Me!</button>
<!-- Viz is displayed here -->
<p id="Showviz"></p>
</body>
</html>
So I'm making my first electron app after a 7 hour js crash course and 1 semester of AP Computer Science Principles so I'm pretty new, so bare with me. Im making a shop script app in electron and I have a preliminary basic UI setup in electron with a main.js file which handles the opening of the app and UI stuff. Now I wanted to make the first content script part of the app that actually does stuff (save.js). Essentially the finished UI will have 4 user input fields and I need to take those inputs from the html input/form and save them as variables, then display them on the screen. My variables will be (link, price range, Brand, Model). From the course I took I tried to use document.getElementById in a variable and then using .textContent in an onclick function, so that when the html button is pressed it displays the user input on a section of the page. It didn't work, so I tried this approach and it still doesn't return the input into the UI. Any help is appreciated.
Here is the save.js:
let displayLink = document.getElementById('loggedLink')
function getVal() {
const val = document.querySelector('input').value;
console.log(val);
displayLink.textContent = (val);
}
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Link</title>
</head>
<body>
<script src="save.js"></script>
<form>
<div>
<label>Enter Item</label>
<input type="text" id="itemEl" autofocus>
</div>
<button onclick="getVal()" type="submit">Add Item</button>
<span id="loggedLink">Consoloe: </span>
</form>
</body>
</html>
change in JS
function getVal() {
let displayLink = document.getElementById('loggedLink')
const val = document.querySelector('input').value;
console.log(val);
displayLink.textContent = 'Consoloe: ' + (val);
}
change in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Link</title>
</head>
<body>
<script src="save.js"></script>
<form>
<div>
<label>Enter Item</label>
<input type="text" id="itemEl" autofocus>
</div>
<button onclick="getVal()" type="button">Add Item</button>
<span id="loggedLink">Consoloe: </span>
</form>
</body>
</html>
I am new to javascript programming so am hoping that this is a simple issue... I'm wanting my webpage to allow a user to input a music track name and artist in two separate fields and once you hit 'go' the javascript will run and parse the input into a string. To test I have tried to see if these inputs are being taken and I have tried to print them to console, however nothing is being printed to the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main-container">
<div class="header">
<p>TrackSelector</p>
</div>
<section>
<div class="form">
<form action="">
<input type="textt" class="track" placeholder="Enter track..." />
<input type="texta" class="artist" placeholder="Enter artist..." />
<button type="button" class="submit-btn">GO</button>
</form>
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Javascript file:
const app = {};
//Allow the user to enter names
app.events = function() {
$('form').on('button', function(e){
e.preventDefault();
let tracks = $('input[type=textt]').val();
let artists = $('input[type=texta]').val();
console.log(tracks);
console.log(artists);
});
};
//
//
app.init = function(){
app.events();
};
$(app.init);
I believe I have specified to take in the correct inputs and specified the correct button reference, have played around to try out other methods but I'm still quite stuck... any ideas?
Replace
$('form').on('button', function(e){
with
$('form .submit-btn').on('click', function(e){
jQuery .on() expects event name as its first argument.
There is no input type type="textt" and texta. There are only predefined types like text, email, password, checkbox and so on... So make type "text" in both inputs and for reference use id: <input id="my_track" type="text">. Then in javascript get value by $('#my_track').val(); To handle submit use $('form').on('submit', func)
I have a web page with a simple image OCR text.
I would like to get the text of this image with Tesseract.js. It's working fine except at first launch. The following message is displayed and nothing more:
initializing api (100%)
After reloading it's working fine. I don't know why it only work after reloading the page. If I clear the cache the issue reappears. I use Firefox.
My HTML/Javascript file
<html>
<head>
<title>QRScanner Library Test</title>
<script src="tesseract.js"></script>
</head>
<body>
<input type="button" id="go_button" value="Run" />
<div id="ocr_results"> </div>
<div id="ocr_status"> </div>
<img id="img" src="ocr.gif"/>
<script>
document.getElementById("go_button")
.addEventListener("click", function(e) {
var url = document.getElementById("img").src;
runOCR(url);
});
function runOCR(url) {
Tesseract.recognize(url)
.then(function(result) {
document.getElementById("ocr_results")
.innerText = result.text;
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
</script>
</body>
</html>
I have downloaded in the same folder all js files: tesseract.js, worker.js, index.js and language package eng.traineddata.gz
What I'm Trying to do is to have a text field and a button, and create usernames, so when the user opens the first view he will be asked to enter his username. I created multiple chat rooms from a free service online and saved their embadable code.
The code for the embedable chat room:
<div id="tlkio" data-channel="lobby" style="width:100%;height:400px;"></div>
<script async src="http://tlk.io/embed.js" type="text/javascript"></script>
basically what I want to change from all of this is the date-channel I want it to change for example from "lobby" to "Mentors"
I Tried this:
<head>
<script type="text/javascript" >
var x;
function func() {
var r = document.getElementById("tlkio");
var a = document.getElementById("entr");
switch(a)
{
case "username1":
r.data-channel="lobby";
break;
case "username2":
r.data-channel="mentors";
break;
default:
void(0);
}
}
</script>
</head>
<body>
<form>
<input type="text" id="entr">
<input type="button" onclick="func()" value="go">
<div id="tlkio" data-channel="lobby" style="width:100%;height:400px;"></div>
<script async src="http://tlk.io/embed.js" type="text/javascript"></script>
</form>
</body>
And with no luck, I tried creating an empty div, and then embed all the embedable chat code in the javascript code, but it didn't work either. I searched for solutions but also with no luck :(
I really appreciate any help I could take with this problem.