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.
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>
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.
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)
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
I would like to add this code:
<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2">
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
into the call of the isOpen() method at the end of the following javascript code:
<head>
<script type="text/javascript">
var theDate = new Date();
var dayOfWeek = theDate.getUTCDay();
// Returns true if the restaurant is open
function isOpen()
{
//I'll fill this in later, for now, return true
return true;
}
</script>
</head><body>
<script type = "text/javascript">
if(isOpen())
{
//ADD CODE HERE
}
</script>
</body>
However, when I try to just copy and paste the two together it doesn't work. I think it has something to do with nested tags but I'm not sure
You can write out the script into the document dynamically.
<body>
<script type = "text/javascript">
if(isOpen())
{
document.write('<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2"></script>');
}
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
</body>
As #Jared Farrish noted in the comments, you might as well use the noscript tag directly on the page.