With the use of Javascript I want to display different HTML content based on the value of a class of an HTML element which is existing on the page. eg:
<body class="de">
display:
<div id="de">some html</div>
If the body element has another class value, eg class="en" it should display
<div id="en">some other html</div>
I have already played around with hasClass function and an if statement. But it did not work for me.
What about ?
<body class="en">
<script>
if($('body').hasClass('de')) {
$('body').html('<div id="de">some html</div>');
}
else if($('body').hasClass('en')) {
$('body').html('<div id="en">some other html</div>');
}
else if($('body').hasClass('es')) {
$('body').html('<div id="es">another html</div>');
}
else {
...
}
</script>
Dynamic :
var bodyClass = $('body').attr("class");
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
But you should verify that body has a class and that an element with an identical id exist in your document.
The solution I am working with:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
if($('body').hasClass('lang-de')) {
document.getElementById("lang"); {
$('#lang').html('<div id="de">some html</div>');}
}
else if ($('body').hasClass('lang-en')) {
document.getElementById("lang"); {
$('#lang').html('<div id="en">some other html</div>');}
}
</script>
</body>
</html>
With jQuery :
$('.de').html('<div id="de">some html</div>');
If you have different tags to fulfil with different html content use a generic class + a specific one (eg : class="dynamic de") and loop all elements with "dynamic" class and use hasClass in a if/elseif (or better a switch/case) to target them separatly.
Btw, AngularJs has "directives" that handle perfectly that kind of need ;)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang-de"></div>
<div id="lang-en"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
$('div#lang-*').hide();
$('#' + bodyClass).show();
</script>
</body>
</html>
What about?
<html>
<head>
<style>
body.lang-en #en{display:block;}
body.lang-de #de{display:block;}
</style>
</head>
<body class="lang-en">
<div id="en" hidden>some text</div>
<div id="de" hidden>some other text</div>
<hr>
<button onclick="toggle()"></button>
</body>
<script>
function toggle(){
var lang=['lang-en','lang-de'];
var i=lang.indexOf(document.body.className);
document.body.className=(i+1 == lang.length ? 0 :i+1);
}
</script>
</html>
OR
with jQuery
$('#en,#de,#jp').hide();
$('#'+$('body').attr('class').replace('lang-','')).show();
Related
I'm very new to HTML< Javascript concepts. So kindly go easy on me.
I created 2 tags & want to selectively add data to each div tag using their ID, onload, but the the below code isn't adding "H1" & "h2" to each div tag.
Did i miss something ?
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body>
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>
<script type="text/javascript">
function populatehtmlTab1() {
document.getElementById(tab1).innerHTML = document.getElementById(tab1).innerHTML + "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById(tab2).innerHTML = document.getElementById(tab1).innerHTML + "<p>h2</p>";
}
</script>
</body>
</html>
There are a few things wrong with this. Here is the code amended:
function populatehtmlTab1() {
document.getElementById('tab1').innerHTML = "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById('tab2').innerHTML = "<p>h2</p>";
}
function loadHtml(){
populatehtmlTab1();
populatehtmlTab2();
}
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body onload="loadHtml()">
<div id="tab1" >
<p>i1</p>
</div>
<div id="tab2">
<p>i2</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
First the element id selector must be a string:
document.getElementById('tab1')
second you just need to assign the innerHTML directly:
document.getElementById('tab2').innerHTML = "<p>h2</p>";
Third you should use onload on the body, I wrapped both your functions into another function in my amended code.
You can use:
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body>
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>
<script type="text/javascript">
function populatehtmlTab1() {
document.getElementById(tab1).innerHTML = $('#tab1').val() + "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById(tab2).innerHTML = $('#tab1').val() + "<p>h2</p>";
}
</script>
</body>
</html>
div elements do not have onload so your functions are not being called.
Use insertAdjacentHTML for the insertion
Pass a string to getElementById.
function populatehtmlTab1() {
document.getElementById("tab1").insertAdjacentHTML("beforeend", "<p>h1</p>");
}
function populatehtmlTab2() {
document.getElementById("tab2").insertAdjacentHTML("beforeend", "<p>h2</p>");
}
document.addEventListener("DOMContentLoaded", function() {
populatehtmlTab1();
populatehtmlTab2();
});
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>
Sorry for mixing jquery
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body>
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>
<script type="text/javascript">
function populatehtmlTab1() {
document.getElementById(tab1).innerHTML = document.getElementById(tab1).value + "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById(tab2).innerHTML = document.getElementById(tab1).value + "<p>h2</p>";
}
</script>
</body>
</html>
If the element 'value' is not detected in 'innerHTML', you can generate variables:
var tab1Value = document.getElementById(tab1).value;
Hello I am very new to ExtJs please help me knowing Ext.get()
This works:
Ext.get('tag2').hide(); // worked well on with Id
<div id ="tag2">using id</div><!--given with id-->
Now this is the problem
Ext.get('tag2').hide()//hiding only id not class
<div class ="tag2">using class</div><!--given with class-->
Doesn't work on class.
Take a look the complete code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('tag2').hide()//hiding only id not class
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('helloWorldPanel'),
text: 'show',
listeners: {
click: function() {
this.hide();
},
hide: function() {
Ext.get('tag1').hide();
Ext.get('tag2').show();//not working hear
}
}
});
});
</script>
</head>
<body>
<div class ="tag1">Test Div</div>
<div class ="tag2">using class</div><!--given with class-->
<div id ="tag2">using id</div><!--given with id-->
<div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- >
</body>
</html>
Use the following instead of get. Get accepts the id, for querying classes, you need to use select.
Ext.select('.tag2').hide();
UPDATED
Ext.get() is using ID to find element.
Ext.select(selector) - use this to access DOM element by class selector
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tag = Ext.get('tag');
var tagTwo = Ext.select('.tag2');
console.log(tag);
console.log(tagTwo);
tag.hide(); // hide by ID
tagTwo.hide(); // hide all divs with tag2 class value
});
</script>
</head>
<body>
<div id="tag">Test Div</div>
<div class="tag2">Test Div2</div>
<div class="tag2">Test Div3</div>
</body>
</html>
This is my javascript for replacing some text:
document.body.innerHTML = document.body.innerHTML.replace(/Sometext/g, 'difference');
Ho do I change color, font-size, font and such?
I need to link my script like this, can't use { otherwise:
<script>$(document).ready($.getScript("url"));</script>
I though something like this would work:
window.onload = function() {
document.body.innerHTML =
document.body.innerHTML.replace(/Deckling/g, result);
}
var str = "The Liberator";
var result = str.fontcolor("Red").italics().fontsize(6);
result.style.fontFamily = "Harrington";
Any help? (first post and very limited Knowledge)
You can wrap you text in a div or span tag, select it in JS applying a class.
The class will contains the style for your text.
Just a quick example in vanilla javaScript (no jquery):
http://jsbin.com/yufiteseme/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
color:red;
font-style: italic;
font-size: 6px;
{
</style>
<script>
function changeColor(){
document.getElementById('text').classList.add('a');
}
</script>
</head>
<body onload="changeColor()">
<div id="text">
Test for example
</div>
</body>
</html>
You can change style of an html element using javascript, put your script below the element.
The following example changes the style of a 'p' element using javascript:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
</script>
</body>
</html>
You can also change style of an html element using jquery.
The following example changes the style of a 'p' element using jquery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#p1').ready(function(){
$('#p1').css({"color": "green"}).css({"fontFamily": "Arial"}).css({"fontSize": "24px"});
});
</script>
</head>
<body>
<p id="p1">Hello World!</p>
</body>
</html>
That will not work:
var result = str.fontcolor("Red").italics().fontsize(6);.
You need to add css to change the surface.Add this to your header:
.textstyle{
font-size:16px;
font-family:Harrington;
}
</style>
And add this to your window.onload:$('body').addClass('textstyle');
<html>
<head>
<script type="text/javascript">
function getElement(e) {
var element = e.target || e.srcElement;
alert(element.id);
}
</script>
</head>
<body onclick="getElement()">
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
Tried this to get the ID of element clicked and alert it.
I'm sure it's something pretty basic I'm missing.
Can anyone help?
It's actually pretty basic, stop using inline event handlers
<!DOCTYPE html>
<head>
<title>It works</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
document.addEventListener('click', function(e) {
alert( e.target.id );
}, false);
</script>
</body>
</html>
FIDDLE
In this particular case, you need to actually send in the event object when binding to the onclick handler (example below).
However, I would strongly advise against using this approach!
Use document.addEventListener instead.
<html>
<head>
<script type="text/javascript">
function getElement(e) {
var element = e.target || e.srcElement;
alert(element.id);
}
</script>
</head>
<body onclick="getElement(event)">
<div id="div1">First Div</div>
<div id="div2">Second Div</div>
</body>
</html>
I need help. I'm trying to get a link to change the displayed answer when you click on the link. I want it to toggle back and forth each time you click on it. I've been playing around with multiple items but nothing seems to work yet. I've commented out some notes to help sort out what I want to do. Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
function flipSwitch(){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'block';
//get the first div into this variable
//var firstDiv = document.getElementById('first');
firstDiv.style
//change it's style/display properties from none to block. Is it visible now when you click the link?
//firstDiv.
}
</script>
</HEAD>
<BODY>
<div id="home">
Let's see if we can get this to work?
</div>
<div id="first" style="DISPLAY: none;">This is a test...</div>
<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>
</BODY>
It's good practice to move javascript out of your HTML.
Here is an example of toggling the CSS Display property in javascript.
Fiddle: http://jsfiddle.net/LdPfS/
var link = document.querySelector("#home > a")
link.addEventListener("click", function(e) {
e.preventDefault()
var firstDiv = document.getElementById('first'),
secondDiv = document.getElementById('second'),
toggle = firstDiv.style.display === "none" ? "block" : "none"
/* toggle = firstDiv.style.display === "none" ? "block" : "none"
* Read as
* if ( firstDiv.style.display === "none" ) {
* toggle = "block"
* else {
* toggle = "none"
* }
*/
firstDiv.style.display = toggle
secondDiv.style.display = toggle
})
I agree that the all caps html is weird but for the sake of making this quick, I'll copy/paste your code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
function flipSwitch(){
// first and foremost, you're using jQuery so let's use jquery
if ($('#first').is(':hidden')) {
$('#first').show();
$('#second').hide();
} else {
$('#first').hide();
$('#second').show();
}
}
// next, let's get your javascript OUT of the html
$(document).ready(function () {
// when the document has loaded, attach our function as a
// click handler to the link
$('#my_switch').on('click', flipSwitch);
});
</script>
</HEAD>
<BODY>
<div id="home">
<a id="my_switch">Let's see if we can get this to work?</a>
</div>
<div id="first" style="DISPLAY: none;">This is a test...</div>
<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>
</BODY>
Similar to MBottens, but with some simple JQuery:
$('#home > a').on('click', function(e) {
e.preventDefault()
$('#first').toggle();
$('#second').toggle();
});
Try this logic. Take a global variable and set its value to 1.
<script type="text/javascript">
var countClick=1;
function flipSwitch(){
if(countClick%2==0){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
}
else{
document.getElementById('first').style.display = 'none';
document.getElementById('second').style.display = 'block';
}
countClick++;
}
</script>
Also please change your html with the following html:
<body>
<div id="home">
Let's see if we can get this to work?
</div>
<div id="first" style="display: none;">This is a test...</div>
<div id="second" style="display: none;">of the emergency broadcast system</div>
</body>