How to display javascript variables - javascript

I have looked up a question on the website (How to display javascript variables in a html page without document.write)
But when executing it in my own coding program it does not work. Hope you can help out!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
</style>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
<script>
//https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event)){
$jsValue.innerHTML = $jsName.value;
}, false);
</script>
</body>
</html>

Because you have syntax error.. check the console.
Correct code should be:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);

Related

Display a django-from from JS

so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>

On change input in parent send val to iframe with update

I need update iframe's content on input[text] changed(or on some another event).
For example: I'm typing in parent's input "Hello World!!!", and iframe's <h1>Hi</h1> is changing to
<h1>Hello World!!!</h1> symbol by symbol.
Better if solution will be on jQuery, but vanilla js is ok, too))
Thank you very much.
P.S. Sorry for my bad English(
better way is using Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a Page..</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
</style>
</head>
<body>
<p>parent input :
<input id="in-Txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<iframe id="in-Frame" src="xyz_frame.html" ></iframe>
<script>
const inText = document.querySelector('#in-Txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, inFramW = document.querySelector('#in-Frame').contentWindow
btSend.onclick=_=>{
let info = { inTxt: inText.value }
inFramW.postMessage( JSON.stringify(info), "*")
}
</script>
</body>
</html>
iframe page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p> the iframe </p>
<p id="info-Parent">...</p>
<script>
const infoParent = document.querySelector('#info-Parent')
window.onmessage=e=>
{
let message = JSON.parse ( e.data )
infoParent.textContent = message.inTxt
}
</script>
</body>
</html>
You can pass the value on the parent page as a parameter to the iframe.
Say for example the following
Parent HTML,
<input type="text" id="parenteElem">
<iframe id="frameOnParent">
Parent Script:
<script type="text/javascript">
$("#parentElem").on("change", function(event) {
$('#frameOnParent').attr('src', "test.html?param1=" + $(this).val());
})
</script>
Iframe HTML:
<h1>Hi</h1>
Iframe Script:
<script type="text/javascript">
function getHeader() {
var headerText = window.location.search.substring("param1");
return headerText;
}
var heading = getHeader();
$("h1").html(heading);
</script>

Access a Variable within a function in Javascript

I want to Check the woodCount Variable if it is equal to or greater than 25 I want to have a new button appear on the page. For now I just had it console.log true or false.
Sorry if this is really easy or makes no sense but I am new to Javascript. Thanks!
JAVASCRIPT FILE
var woodCount = 0;
var gatherWood = document.getElementById("gatherWood");
var wood = document.getElementById("wood");
gatherWood.onclick = function(){
woodCount++;
wood.innerHTML = woodCount;
}
function fire() {
if woodCount >= 25 {
console.log('True');
}else{
console.log('False');
}
}
HTML FILE
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game</title>
<meta name="description" content="Game">
<meta name="author" content="SitePoint">
<script src="game.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<input class="woodbtn" type="button" value="Gather Wood" id="gatherWood" />
Wood = <span id="wood">0</span>
</div>
</body>
</html>
Add a button to the DOM and keep it hidden. When it exceeds the threshold, toggle the display property from hidden to block.
Make sure we call the function where the toggling of style happens in the onclick event handler where incrementation occurs.
var woodCount = 0;
var gatherWood = document.getElementById("gatherWood");
var wood = document.getElementById("wood");
gatherWood.onclick = function() {
woodCount++;
wood.innerHTML = woodCount;
fire();
};
function fire() {
if (woodCount >= 25) {
document.getElementById("higherThan25")
.style.display = "block";
} else {
//console.log("False");
}
}
.woodbtn {
border-style: solid;
border-color: white;
color: white;
padding: 10px 10px;
text-align: center;
font-size: 13px;
cursor: pointer;
float: right;
background-color: transparent;
}
.woodtxt {
text-color: white;
}
body {
background-color: black;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game</title>
<meta name="description" content="Game">
<meta name="author" content="SitePoint">
<script src="game.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<input class="woodbtn" type="button" value="Gather Wood" id="gatherWood" />
<input style="display: none;" class="woodbtn" type="button" value="Higher Than 25" id="higherThan25" />
Wood = <span id="wood">0</span>
</div>
</body>
</html>

Trouble with Show/Hide code, second level

I cannot for the life of me figure out why the text under Sub1 and Sub2, do not show the text under them, when clicking them. Only the first link "Main Category" functions. It is making me enter more description, though the issue is already explained the best I know how.
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>
You have a typo in your JS $('.commentsTitle').click(...
In the html you assigned the class commentsTitle, in the JS, you referred to commentTitle.
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>

JavaScript function not called at onclick button in Visual Studio 2015 Community Edition

I am learning JavaScript and CSS and made a test project in Visual Studio 2015 Community Edition. The problem that I have is, the function changeTitleCSSStyle isn't called when using Visual Studio 2015 Community Edition. At online editor https://js.do/ and in Google Chrome browser the function call works properly. My code:
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/default.css">
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button onclick="javascript: changeTitleCSSStyle();">Change style</button>
</body>
</html>
default.css
h1 {
color: red;
background-color: lightGreen;
border: 12px solid violet;
padding: 5px;
border-radius: 15px;
text-align: center;
}
p, h1 {
font-family: cursive;
}
p, img, button {
margin-left: 50px;
}
Not sure why it doesn't work when using VS. Maybe inline click events are not supported for some reason.
Perhaps it works if you try setting the event in your script itself like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript and HTML</title>
<meta charset="utf-8" />
<script>
function changeTitleCSSStyle() {
alert("Aanroep");
var title = document.querySelector("#mainTitle");
title.style.color = 'black';
title.style.backgroundColor = "yellow";
title.style.border = "5px dashed red";
}
document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById('change_style_button')
button.addEventListener('click', function(){
changeTitleCSSStyle()
});
});
</script>
</head>
<body>
<h1 id="mainTitle">My home page</h1>
<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button id="change_style_button">Change style</button>
</body>
</html>
You can try
<button onclick="changeTitleCSSStyle();">Change style</button>

Categories

Resources