When I click on button Add, I want a dynamic button to be added into the div. I tried but couldn't do it. And I cannot figure out what is where the mistake is, in the code. Here's my code.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="stylesheets/bootstrap.css" rel="stylesheet" type="text/css">
<link href="stylesheets/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="stylesheets/bootstrap-theme.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function addinfo()
{
//Create an input type dynamically.
element = document.createElement("button");
element.className='btn btn-default';
var t=document.createTextNode("Edit");
element.appendChild(t);
element.id=t;
//var account=document.getElementById('newaccname').value;
var foo = document.getElementById("acc");
// //Append the element in page (in span).
foo.appendChild(element);
// var d = document.getElementById('acc');
// d.appendChild(i);
}
</script>
</head>
<body>
<button type="submit" name="addaccount" class="btn btn-default" onlick="addinfo()">Add</button>
<div id="acc" style="width:500px;height:100px;border:1px solid #000;"></div>
</body>
</html>
You have a typo in your code. onlick -> onclick
onlick="addinfo()"
should obviously be
onclick="addInfo()"
Related
i have a "Pause" button with a pause_circle_outline materialize icon, and when it clicked i want to change the text to "Resume" and changing the icon to play_circle_outline, but when i try to change the text it changed the text and deletes the icon. here is my code snippet example:
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerText = "Resume"
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>
.innerText is a sort of "safe"* way to access a node's innerHTML, which in your case includes both the Pause-text, as well as the <i.../> tag.
A way to solve this is to add a span to hold the text. spans don't do anything (as they are inline elements and are by default formatted/shown as a simple text element), but they help by making the text node selectable by document.querySelector!
Example:
var playing = true
window.addEventListener("load", () => {
document.querySelector("#pause_btn").addEventListener("click", () => {
playing = !playing
if(playing) {
document.querySelector("#pause_btn span").innerText = "Pause"
document.querySelector("#pause_btn i").innerText = "pause_circle_outline"
} else {
document.querySelector("#pause_btn span").innerText = "Resume"
document.querySelector("#pause_btn i").innerText = "play_circle_outline"
}
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">
<span>Pause</span>
<i class="material-icons right">pause_circle_outline</i>
</a>
</body>
</html>
I also added some extra code to make it clickable multiple times!
*: By safe, in this context, I mean that it's safe from a security issue called XSS. Generally it's better to use innerText when you don't explicitly need to change the HTML itself, but if you do: Make sure that there's NO way a user can input something that gets put into the innerHTML. What I initially meant was simply that writing to either innerHTML and innerText will always overwrite whatever contents the element has, and that innerText is generally the safer of the two.
Both textContent and innerText remove child nodes when altered
Docs
Perhaps place your text within a span with an ID and change its textContent?
that way your i tag should remain untouched.
Have you tried putting the icon along with the text to the innerHTML?
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerHTML = 'Resume<i class="material-icons right">pause_circle_outline</i>'
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with ur friends!</title>
<!-- Boostrap links-->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- font-family: 'Montserrat', sans-serif; basic -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"rel="stylesheet">
<!-- font-family: 'Open Sans', sans-serif; header -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Firebase links -->
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
<link rel = "stylesheet" href = "../css/chat.css">
</head>
<body>
<h2 id = "title"></h2>
<canvas width = "800" height = "800" id = "myCanvas"></canvas>
<div style = "display: flex;">
<label>Width:</label>
<input type = "number" id = "width" placeholder="Type in the width" class = "form-control">
<div id = "color">
<button id = "red" class = "square"></button>
<button id = "blue" class = "square"></button>
<button id = "green" class = "square"></button>
<button id = "black" class = "square"></button>
<button id = "pink" class = "square"></button>
<button id = "orange" class = "square"></button>
<button id = "yellow" class = "square"></button>
<button id = "purple" class = "square"></button>
</div>
</div>
<script src = "../js/chat.js"></script>
</body>
</html>
This is the code but it is showing me a blank page can someone please help me
I am trying to fix this problem but nothing is working please can someone explain.
My live reload on visual studio shows the same result, I have not done any Java script or css in this file.
Apparently, you don't have any "content" in your page. Only the #width input. I mean, you've created all your HTML links, tags, ids, classes... But you have any content in those tags.
In fact, if I preview your HTML code, the only content that I see is the #width input at the bottom of the page. Your width input field that I can see at the bottom of the page
Solution:
For example, try to add some text to the h2 tag. You can replace your <h2 id = "title"></h2> with <h2 id = "title">Some sample text!</h2> and you should be able to start seeing content on your page.
Might be of help, I've noticed on line 10 and 17 the following are not active:
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"rel="stylesheet">
Just add the space properly and providing you also have the other files on the server this should work. If it doesn't render properly after this find the other files and link their sources back.
I am trying to display an iframe when a button is clicked. I got the following JS code:
function show() {
var iframe1 = document.getElementById('iframe');
iframe1.style.display = 'block';
}
and here is the HTML of my page:
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Welcome</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="global.css"/>
<link rel="stylesheet" type="text/css" href="buttons.css"/>
<link rel="stylesheet" type="text/css" href="paragraphs.css"/>
<link rel="stylesheet" type="text/css" href="iframes.css"/>
<script type="text/javascript" src="files.js"></script>
</head>
<body>
<form> <button id="files" onclick="show()">Files</button> </form>
<iframe id="iframe" src="files.html" width="200" height="100"></iframe>
</body>
</html>
The script is inside an external file named files.js. When I test the code, it works, but the iframe only shows for 1 milisecond. What's wrong?
Thanks in advance for your answers!
Add type="button" to your <button>. As it is right now, it is inside a form, and without any type attribute — that way it defaults to type submit, so when you click it, the page is submitted and disappears.
Also, change onclick="show()" to onclick="show", or better yet — use .addEventListener() instead.
function show() {
var iframe1 = document.getElementById('iframe');
iframe1.style.display = 'block';
}
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Welcome</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="global.css"/>
<link rel="stylesheet" type="text/css" href="buttons.css"/>
<link rel="stylesheet" type="text/css" href="paragraphs.css"/>
<link rel="stylesheet" type="text/css" href="iframes.css"/>
<script type="text/javascript" src="files.js"></script>
</head>
<body>
<form> <button type="button" id="files" onclick="show">Files</button> </form>
<iframe id="iframe" src="files.html" width="200" height="100"></iframe>
</body>
</html>
EDIT: Additional code in response to OP's comment:
var iframeShowing = false;
function show() {
var iframe1 = document.getElementById('iframe');
iframe1.style.display = iframeShowing ? 'block' : 'none';
iframeShowing = !iframeShowing;
}
The form is causing a page reload. You can stop that by simply adding a event.preventDefault(). function show(e) { e.preventDefault(); ...
However, you will need to inject the event parameter in the function call.
onclick="show(event)"
Another option you have is just remove the form tag and keep the button tag. That should do the trick.
I am trying to create buttons that can be moved throughout the page but everything I have tried isn't working for me.
Even running the example on: Move buttons on a page using JavaScript
does not work.
So far my javascript file is only able to create the buttons that I need:
function add(text) {
console.log("New button with text: "+ text);
var word = document.createElement("button");
word.type = "button";
word.id = "magnet";
word.draggable = true;
word.value = text;
word.onclick = "dragstart(event);";
var fridge = document.getElementById("poem");
//fridge.appendChild(word);
word.appendChild(document.createTextNode(text));
fridge.appendChild(word);
$("#addbutton").val(""); }
Can someone explain how to move a button using clientX and clientY?
This is my html file...
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="poetry.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<input type="text" id="addbutton">
<button type="button" onclick="add(addbutton.value);">Add Word</button>
<div id="poem"></div>
</body>
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine.
when I tried to include the header.html page using .load() function then the CSS won't work properly.
Here is the online sample codepen
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other.
Hope this helps.
Your scripts.js file contains
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html.
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.
Just add this at the end after your header content
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js
Also here is the github repo code structure
https://github.com/siddhartharora02/jsLoad
Try this
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
For your original issue,
If you want to include html content dynamically, here is a method to do it,
HTML,
<link data-include="includes/header.html">
JS,
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help!
Try this,
Now you can include any partial content as you want.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
Try using like this,
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
How about this:
Instead of using a load method, use an iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit
<iframe id="inc" src="header.html" class="hidden"></iframe>
css
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS
!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!
Requires jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});