We Keep Coding

How to change one HTML file to another without changing link?

I have an html file(a webpage). I want when I press a button on it, the page should be replaced by another html file (with its own css, javascript functions etc) without being redirected to some other link.
For example, if link in first case is abc.com/def it should be same after too.
Using this code, I am able to change webpage look, but not getting how to change look (and also manage to load css and js functions) from another file.
<script type="text/javascript">
document.body.addEventListener('click',function(){
document.write("THIS IS NEW TEXT")
},
false);
</script>

You need to look into frameworks like AngularJS, Specially Routing of Angular. They provide such features built-in for web applications. However, you can do it the hard way, using javascript, like you are doing it right now. Add CSS and change whole body HTML using javascript if you don't want to learn any new framework or libraries.

You want to use PJAX,
Here's a link for an example.

As discuss by others, you should use a Framework to do this..
But this is a complete solution you can inspire of:
let layouts = {}
let current = null
// Display the new page by deleting current, and replacing by the good one
let displayLayout = (layout_id) => {
let parentNode = current.parentNode
parentNode.removeChild(current)
current = layouts[layout_id]
parentNode.appendChild(current)
loadEvents(current)
}
// Load event for HTML DOM you just created
let loadEvents = (layout_el) => {
Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
displayLayout(e.currentTarget.dataset.layout)
})
})
}
// On init I get all the existing layout, but you can build you own dictionary an other way.
Array.from(document.getElementsByClassName('layout')).forEach(l => {
layouts[l.id] = l
if (l.classList.contains('active')) {
loadEvents(l)
current = l
}
else {
l.parentNode.removeChild(l);
}
})
/* Global CSS */
body, html, .layout {
height: 100%;
margin: 0;
}
* {
color: #FFF
}
.layout {
display: flex;
}
.nav, .page {
}
.nav {
width: 150px;
background: #555;
}
/* Special CSS for one layout */
#layout1 {
background: red;
}
#layout2 {
background: blue;
}
<div id="layout1" class="layout active">
<div class="nav">
Page 2
</div>
<div class="page">
This is page 1
</div>
</div>
<div id="layout2" class="layout">
<div class="nav">
Page 1
</div>
<div class="page">
This is page 2
</div>
<style>.page { font-size: 2em }</style>
</div>

Google app script : Separating HTML and CSS

i have a question connected with title. Currently i am trying to follow google "best practice". https://developers.google.com/apps-script/guides/html/best-practices
I have no idea why its not working.
Here is a MainPageCSS.html
<pre>
<style>
p {
color: green;
}
</style>
</pre>
Then comes server-side function:
function includeCSS() {
var content = HtmlService.createTemplateFromFile('MainPageCSS').getRawContent();
//.getContent();
return content;
}
I am using a sidebar via HtmlService, and calling google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
I tried different ways of adding css into page, but noone worked...
function SuccessAddCss(Style){
var styles = document.getElementById("allStyles").innerHTML += "p { color:red }";
var text = styles.innerHTML;
var styleNode = document.createElement('style');
var styleText = document.createTextNode('p { color:red; } ');
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);
alert("ok");
};
function teso()
{
google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
alert(text);
};
In order to add somehow css from MainPageCSS to MainPage
id="allStyles" type="text/css"
<pre>
<style id="allStyles" type="text/css">
h2{
font-family: Times New Roman, Times, serif;
font-size: 14px;
text-align: center;
}
</style>
</pre>
Also sidebar is launched in SandBox.Native mode, so it allows css dynamic changes.
Thank you for help.

In my website, I use a scriptlet to include the CSS file.
HTML:
<?!= include('MainPageCSS'); ?>
<div>Some Content Here</div>
<form>A form</form>
<button>A button</button>
That's how the include function gets called from the HTML file. Just curious, could you try taking out the <pre> tags and see if that makes any difference?

Toggle display:none style with JavaScript

I want to change the style (second line below) to remove the display: none; part when the user clicks on the "Show All Tags" link. If the user clicks the "Show All Tags" link again, I need the display: none; text added back in to the "style..." statement.
Show All Tags
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
I've searched here and Google for an example I can apply to my situation. I've found plenty of examples using 2 DIV blocks to show/hide. I really need to do it this way, by modifying the html style element. Does anyone have an example (or provide a link to an example) that does this type of toggle wtih the display: none text.

Give your ul an id,
<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
then do
var yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';
IF you're using jQuery, this becomes:
var $yourUl = $("#yourUlId");
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');
Finally, you specifically said that you wanted to manipulate this css property, and not simply show or hide the underlying element. Nonetheless I'll mention that with jQuery
$("#yourUlId").toggle();
will alternate between showing or hiding this element.

Give the UL an ID and use the getElementById function:
<html>
<body>
<script>
function toggledisplay(elementID)
{
(function(style) {
style.display = style.display === 'none' ? '' : 'none';
})(document.getElementById(elementID).style);
}
</script>
Show All Tags
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; ">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

Others have answered your question perfectly, but I just thought I would throw out another way. It's always a good idea to separate HTML markup, CSS styling, and javascript code when possible. The cleanest way to hide something, with that in mind, is using a class. It allows the definition of "hide" to be defined in the CSS where it belongs. Using this method, you could later decide you want the ul to hide by scrolling up or fading away using CSS transition, all without changing your HTML or code. This is longer, but I feel it's a better overall solution.
Demo: http://jsfiddle.net/ThinkingStiff/RkQCF/
HTML:
<a id="showTags" href="#" title="Show Tags">Show All Tags</a>
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>
CSS:
#subforms {
overflow-x: visible;
overflow-y: visible;
}
.hide {
display: none;
}
Script:
document.getElementById( 'showTags' ).addEventListener( 'click', function () {
document.getElementById( 'subforms' ).toggleClass( 'hide' );
}, false );
Element.prototype.toggleClass = function ( className ) {
if( this.className.split( ' ' ).indexOf( className ) == -1 ) {
this.className = ( this.className + ' ' + className ).trim();
} else {
this.className = this.className.replace( new RegExp( '(\\s|^)' + className + '(\\s|$)' ), ' ' ).trim();
};
};

LEVEL - I
document.querySelector('.my-btn').addEventListener('click', myFunction);
function myFunction() {
document.querySelector('.subforums').classList.toggle("off");
}
.off {
display: none;
}
Show All Tags
<div class="subforums off">My text...</div>
LEVEL - II
Toggle hide element Id end className...
function toggleElem(newElem) {
var elem = document.getElementById('' + newElem + '');
var eIdent = (elem != null) ? ('#' + newElem) : ('.' + newElem);
elem = document.querySelector('' + eIdent + '');
elem.style.display = (elem.style.display != 'none') ? 'none' : 'block';
}
You can test directly from this link: https://codepen.io/pedro404/pen/VwmPBee

You can do this through straight javascript and DOM, but I really recommend learning JQuery. Here is a function you can use to actually toggle that object.
http://api.jquery.com/toggle/
EDIT: Adding the actual code:
Solution:
HTML snippet:
Show All Tags
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; ">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
<li>Tag 4</li>
<li>Tag 5</li>
</ul>
Javascript code using JQuery from Google's Content Distribution Network: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
$(function() {
$('#showAll').click(function(){ //Adds click event listener
$('#tags').toggle('slow'); // Toggles visibility. Use the 'slow' parameter to add a nice effect.
});
});
You can test directly from this link: http://jsfiddle.net/vssJr/5/
Additional Comments on JQuery:
Someone has suggested that using JQuery for something like this is wrong because it is a 50k Library. I have a strong opinion against that.
JQuery is widely used because of the huge advantages it offers (like many other javascript frameworks). Additionally, JQuery is hosted by Content Distribution Networks (CDNs) like Google's CDN that will guarantee that the library is cached in the client's browser. It will have minimal impact on the client.
Additionally, with JQuery you can use powerful selectors, adding event listener, and use functions that are for the most part guaranteed to be cross-browser.
If you are a beginner and want to learn Javascript, please don't discount frameworks like JQuery. It will make your life so much easier.

How do I give successive CSS classes different colors (Javascript)?

I have annotated text, and I'd like certain annotated words to be color-coded along with their annotations, but I don't want to have to do it manually. Is there a way to have javascript (or jquery) or even css make the first class="Noted" green, then the second blue, and then on the fifth go back to green, and to do the same with the corresponding class="note"s?

you can do this using :nth-child you will need something like jQuery for support for IE though.. working on that...
here's a first fiddle for a CSS only version http:http://jsfiddle.net/zhQ67/2/ ** FIDDLE updated with new code below **
CSS:
.noted:nth-child(4n+1) {
background: green;
}
.noted:nth-child(4n+2) {
background: red;
}
.noted:nth-child(4n+3) {
background: yellow;
}
.noted:nth-child(4n+4) {
background: blue;
}
final update using thirtdots updated code and including some jQuery for IE - JSBIN Page

Ok, based on your jsFiddle you could use something along these lines to get the result you're after:
p:nth-child(5n+1) .Noted, p:nth-child(5n+1) .Annotation {color: green}
as demonstarted in this modification of your jsfiddle

You can get all elements with getElementsByClass an then simply iterate through them, giving every single one and it's corresponding element class="note" a different color.

In jquery.....set the colors as you see fit. jsFiddle demo
<script type="text/javascript">
$(".Noted").each(function(i,e){
switch(i%4){
case 0: $(this).css({color:"#f00"});break;
case 1: $(this).css({color:"#0f0"});break;
case 2: $(this).css({color:"#00f"});break;
case 3: $(this).css({color:"#ff9"});break;
case 4: $(this).css({color:"#f90"});break;
}
});
</script>

First, try encapsulating your elements inside a container. It will make the children selection much easier.
<div id="parent">
<span class="note">Green</span>, <span class="note">blue</span>
then <span class="note">red</span>.
</div>
then, the js :
<script>
var children = document.getElementById('parent').getElementsByTagName('*')
,colours = ['green','blue','red','orange']
,i,j=0,max;
for (i = 0, max = children.length; i<max; i++) {
if(children[i].getAttribute('class') == 'note') {
children[i].setAttribute('style','color:' + colours[j]);
j++;
if (j>colours.length) {
j = 0;
}
}
}
</script>

If the HTML is being generated by a server side script, you could have the script assign a class based on which Annotation is being generated, then in the stylesheet, assign a color to that class, like so:
.note1 { //Corresponds to class='note1'
color: green; //or whatever you want
}
.note2 { //Corresponds to class='note2'
color: blue; //or whatever you want
}
/* and so on */
If the HTML is simply being written statically, then assign the class corresponding to how it defined in the stylesheet, depending on the color you want.
If they are children, you could use something along the lines of clairesuzy's solution.
The other option is to assign all of them as class note and then have an javascript that colors everything marked as class note based on a predefined order that you set.
That would probably be along the lines of something like this (using jQuery):
Demo here: http://jsfiddle.net/hs8Nm/
<p class="note">Note 1</p>
<p class="note">Note 2</p>
<p class="note">Note 3</p>
<p class="note">Note 4</p>
and the corresponding Javascript:
$(document).ready(function(){
var colors = ['green','blue','orange','yellow',"FFFFF0"]; //Assign your color order here.
$('.note').each(function(index){
this.css('color',colors[index%5]);
});
});

Yes, it can be done using CSS Selectors. You can get the first, second, third, and so on element in a list of matching occurences.

Here you go:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<title>Cycle classes</title>
<style>
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
</style>
<script>
$(document).ready( function() {
$(".Noted").each(function(i) {
var classes = ['green','blue','yellow'];
$(this).addClass(classes[i % classes.length])
});
})
</script>
</head>
<body>
<div class="Noted">hello</div>
<div class="Noted">world</div>
<div class="Noted">it works</div>
</body>
</html>

Append Style to DOM not Replacing Existing

How can I append style element to DOM without eliminating existing style on the item (eg color, text-align, etc)?
The event calls the function, but the problem is 'Style' gets completely replaced with the single item instead.
I have simple code triggered on the event:
function changeback(onoff) {
if(onoff) {
document.getElementById("field1").style.background="#fff";
} else
document.getElementById("field1").style.background="#000";
}

Here is how you can do it :
var elem = document.getElementById('YOUR ELEMENT ID');
elem.style.setProperty('border','1px solid black','');
elem.style is an object implementing the CSSStyleDeclaration interface which supports a setProperty function. If you check the style property in Firebug now, you will notice addition of the border property within the style attribute of the element.

Which browser are you using? In Chrome, this works for me:
<html>
<head>
<style type="text/css">
.test { background: #ff0000; font-family: "Verdana"; }
</style>
<script type="text/javascript">
function changeback(onoff)
{
if(onoff){
document.getElementById("field1").style.background="#0f0";
} else {
document.getElementById("field1").style.background="#000";
}
}
</script>
</head>
<body>
<h1>Test</h1>
<p id="field1" onclick="changeback(true);" class="test">This is a test</p>
</body>
</html>
When I click on the text, the background color changes, but the rest of the style (in this case, the font) stays the same.
Is that what you're trying to do?