This question already has answers here:
Can a JavaScript variable be used in plain HTML?
(7 answers)
Closed 6 years ago.
As href argument, I would like to put a variable.
Instead of:
<p>Go to Google</p>
</body>
</html>
I would like to write something as:
<html>
<body>
var link = "http://www.google.com"
<p><a href=link>Go to Google</a></p>
</body>
</html>
You can do something like this:
<html>
<head>
</head>
<body>
<p><a id="some-link">Some link</a> is here</p>
<script>
var link = 'http://www.google.com';
var someLink = document.querySelector('#some-link');
someLink.setAttribute('href', link);
</script>
</body>
</html>
The script tag executes javascript actions. This one specifically sets the href of the given item with the some-link id. The # means "element with the id".
You can try it over here. https://jsfiddle.net/94ct5hvr/
You can do this with angularJS
<html>
<body ng-app="App" ng-controller="myApp">
<p><a href={{link}}>Go to Google</a></p>
</body>
</html>
On the javascript side you can do:
var app = angular.module('App',[]);
app.controller(function($scope){
$scope.link = "http://www.google.com;
});
Related
This question already has an answer here:
Why there's error in onclick when i have "module" in script tag?
(1 answer)
Closed 7 months ago.
<html>
<head>
<script type="module" src="topo_space.js"></script>
</head>
<body onload="main()">
</body>
</html>
topo_space.js:
export function main(){
const innerHTML = `<svg id="main_svg" width="959" height="704"></svg>`;
console.log(innerHTML);
document.body.innerHtml = innerHTML;
}
Getting error:
topo_space.html:6 Uncaught ReferenceError: main is not defined at onload
I want to stick to using module, because the js can itself further import a json as module, which I find extremely cool.
Checkout this thread to read more information about this problem:
How to use code from script with type=module
The answer is:
window.main = function main() {
const innerHTML = `<svg id="main_svg" width="959" height="704"></svg>`;
console.log(innerHTML);
document.body.innerHtml = innerHTML;
};
<html>
<head>
<script type="module" src="topo_space.js"></script>
</head>
<body onload="main()"></body>
</html>
I used the website tsviewer.com to create an insertable piece of HTML code I can insert into my webpage that will display the status of my Teamspeak server. This is what it gave me. But this doesn't quite work in vue as I don't know where to place the scripts.
<div id="ts3viewer_1118023" style=""> </div>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1118023&text=757575&text_size=12&text_family=1&text_s_color=000000&text_s_weight=normal&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_i_color=&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_c_color=&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_u_color=000000&text_u_weight=normal&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_s_color_h=&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=none&text_i_color_h=000000&text_i_weight_h=bold&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=none&text_c_color_h=&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_color_h=&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none&iconset=default";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
Discord on the other hand gives a single line of code that is easily inserted and works perfectly.
<iframe src="https://discordapp.com/widget?id=261587898996883458&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
The question is, how does one convert the one kind to the other kind? Thanks
you need to add the Javascript before the tag of your
website ends.
important is than that you render an div which the right id
Here some example
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "[add here the whole teamspeaker snippet url]";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<div id="ts3viewer_1118023" style=""> </div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>
I have removed the tsviewer code in his full length because the list is public.
You should add him there [add here the whole teamspeaker snippet url]
Maybe you should also modfiy your post after it or change the url as an example.
I want to get the data from the another html file using angularjs $http get method, but i did't get anything
below is my code
<!DOCTYPE html>
<html>
<head ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p>{{welcome}}</p><br />
<h1>{{error}}</h1>
</div>
<script>
var app=angular.module('myApp',[])
app.controller('myCtrl',['$scope','$http',function($scope,$http){
$http.get('home.html').than(function(response){
$scope.welcome=response.data;
},function(reason){
$scope.error=reason.data;
});
}]);
</script>
</body>
</html>
Below is my another html file code
<p>This is home page</p>
it should be then not than
.then(function(response){
Demo
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 6 years ago.
my controller.js file
function ServicesCtrl($scope) {
console.log("Hello From ServicesCtrl");
$scope.message = "Hello";
}
index.html file
<html>
<head>
<title>The MEAN Stack</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/angular.min.js"></script>
<script src="features/services/controller.js"></script>
</head>
<body ng-app="">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>
</html>
it is not displaying my message. controller.js file is not accessable
Its clear that you are trying to define a controller like a simple js function.
But, It works in a different way.
You have to initialize an angular app within an java-script variable like this,
var app=angular.module("MyApp");
and handle that entire angular application, through that js variable "app".
I strongly recommend you to completely go through below tutorials.. Then, Start creating the App..
https://www.tutorialspoint.com/angularjs/angularjs_mvc_architecture.htm
http://www.w3schools.com/angular/default.asp
You have to define your angular application and its modules.
var app = angular.module('myApp');
app.controller('serviceController', function() {
$scope.message = "Nice, I now know how to create an angular app";
})
And you will now be able to access it on your page:
<body ng-app="myApp">...
<div ng-controller="serviceController">...
{{message}}
This should help you since you're getting started with angular.
Here this example
define your controller name (controller.js)
var app = angular.module('myApp', []);
app.controller('ServicesCtrl', function($scope) {
$scope.message = "Hello";
});
define your app name (index.html)
<body ng-app="myApp">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>
I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.
Here's my code for my mainpage.
sample.html
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
</body>
</html>
sampleFooter.html
<p> THIS IS A FOOTER </p>
It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });
$(function(){
$('#footerLang').load("sampleFooter.html");
});
In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow
$(function(){
$(document).on("ready", function () {
$('#footerLang').load("sampleFooter.html");
});
});
or move the script tag just before the </body>
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</body>
</html>
I found out that this was just a browser compatibility issue. I launch it in Firefox and it worked.