Sorry if this has been asked before but I couldn't find anything. I'm learning to code Javascript at Free Code Camp. When I try to use their code for my self...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$(".message").html("Here is the message");
// Only change code above this line.
});
});
</script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
</body>
</html>
It doesn't work as it should. It should change text when the button is pressed but it doesn't. What's going on?
It doesn't work as it should. It should change text when the button is
pressed but it doesn't. What's going on?
you need to import:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Example:
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
I suppose you are using jquery, but missing the import...
Place this in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
it look like you are using Boots and JQ - just import them to your code (:
This should work. I have tested it on my computer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$(".message").html("Here is the message");
// Only change code above this line.
});
});
</script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
</body>
</html>
You've used jQuery but you should add jquery before using it:
<!DOCTYPE html>
<html>
<head>
<title>your page</title>
<!-- import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- import jquery -->
</head>
<body>
<!-- your code -->
<!-- your code -->
</body>
</html>
Related
Im writing a program to monitor prices on the steam market and im building a UI in electron, the issue is that when i click a button it doesn't register.
i have tried with logging it to console or sending to a new window or opening a link but it doesn't work. I tired using an .on('click', .... as well
index.js:
const {BrowserWindow} = require('electron').remote
const path = require('path')
const {shell} = require('electron')
const launchbtn = document.getElementById('launch')
launchbtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, 'launch.html')
let win = new BrowserWindow({ width: 400, height: 320 })
//shell.openExternal('http://electron.atom.io') tried but didnt work
win.on('close', () => { win = null })
win.loadURL(modalPath)
win.show()
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">Market-Monitor</p>
<h1 id="About">By SourcE</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">Monitor Prices of items</span></p>
</div>
<div id="right-container">
<button id="launch">Launch</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
launch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<button id="launch">test</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
If the button was to work it should open a new instance of the window with the text changed to text.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<form name="form-name" action="launch.php">
<input type="submit" name="submit" value="Button Name">
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
New File call it launch.php
<?php
if ( isset( $_POST['submit'] ) ) {
header("Location: <LINK>");
}
?>
You can easily open a new window via Javascript. Below you can see the code. You just have to do a quick query.
<button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>
Do that with php and a form. The form should have the action of the php file and in the php file you make a query if he has clicked submit and then you make a header location: index ...... etc. I can sent you a code if you want.
I have been reading this book I tried the first example, but It doesn't render the templates, it only shows the text by default. When I open the console, the app ContactManager exits and it's initialiazed.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta charset="utf-8"> -->
<title>Marionette Contact Manager</title>
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/application.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<span class="brand">Contact manager</span>
</div>
</div>
</div>
<div id="main-region" class="container">
<p>Here is static content in the web page. You'll notice that it gets
replaced by our app as soon as we start it.</p>
</div>
<script type="text/template" id="static-template">
<p>This is text that was rendered by our Marionette app.</p>
</script>
<script src="./assets/js/vendor/jquery.js"></script>
<!--<script src="./assets/js/vendor/json2.js"></script>-->
<script src="./assets/js/vendor/underscore.js"></script>
<script src="./assets/js/vendor/backbone.js"></script>
<script src="./assets/js/vendor/backbone.marionette.js"></script>
<script type="text/javascript">
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion: "#main-region"
});
ContactManager.StaticView = Marionette.ItemView.extend({
template: "#static-template"
});
ContactManager.on("initialize:after", function(){
var staticView = new ContactManager.StaticView();
ContactManager.mainRegion.show(staticView);
});
ContactManager.start();
</script>
Try changing
ContactManager.on("initialize:after", function()
to
ContactManager.on("start", function()
Update your "initialize:after" function by
ContactManager.addInitializer(function(){
var staticView = new ContactManager.StaticView();
ContactManager.mainRegion.show(staticView);
});
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.md
Thanks
I would like to start saying that I'm not that experienced with the technologies that I'm using, I'm doing this project to practice using them.
I just downloaded JetBrains Webstorm and created a Foundation Project.
I created a <textarea> and I want to bind it to a value I defined in my AngularJS controller. The controller code is very simple (it's in my main.js file):
var readerApp = angular.module("readerApp", []);
function ReaderCtrl = function($scope){
$scope.data = {
text = "Default text"
}
}
So I only have a simple text that I want to bind like this: ng-model="{{data.text}}"
Although when I do that, the <textarea> still doesn't show anything. I'll post the entire HTML page, maybe there's a small detail I'm missing, but it seems right to me
<!doctype html>
<html class="no-js" lang="en" ng-app="readerApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speed Reader | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="large-12 columns large-text-center">
<h1>Welcome to Speed Reader!</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" ng-controller="ReaderCtrl">
<h3>Insert your text here! </h3>
<textarea id="textarea" rows="25" ng-model="{{data.text}}"></textarea>
Start reading
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice!</title>
<link href="../_css/site.css" rel="stylesheet">
This is my source for jquery (which I got from my text book)
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script src="javascript/hello.js">
</script>
<script src="javascript/fadeIn1.js">
</script>
<script src="javascript/igotit.js">
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
This is what my external javascript files look like. For my external files, would they just need to be the "<script>" part of the code or the whole entire "<DOCTYPE>" to "</html>"?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<link href="../_css/site.css" rel="stylesheet">
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
Sorry, I am new to this and am having troubles.
Your external files should only have JavaScript in them, so nothing that looks like
<this/>
should be in them. It looks like you just want:
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
...in your fadein1.js. Likewise for the other JS files.
When you have the document open in your browser, press F12 for some useful messages to paste here if it still isn't working.
Is Jquery file in the right location? If you are not sure just use this link for jquery:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
And my js file:
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too.
Thank you.
Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
<script type="text/javascript">
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
Sorry but this code works:
<html>
<head>
<script>
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
<body>
<div>
<span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</div>
</body>
</html>
EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script type="text/javascript" src="./static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>