At the moment if I run this script, it creates the html page as expected, although I'm having trouble, having it take in to account variables, for instance the $_GET request for example.
This is inside speech marks, and is sent to a new page on my website using file_put_contents, my aim is to have the variable code defined on the page where it's sent from.
In short; at page A I have the code that creates the new file, at page A I could do something like /directory/to/page/?SET=Hello+ from+stack and it would create the new file, and where it says var code = ' '; I want it to instead be the get request, so it would be var code = 'Hello from stack';
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script> var code = '<?php echo $php_variable; ?>';</script>
// This is what I'm having trouble with,
</head>
<body>
<div class='container'>
<pre class='code-sample'>
<div class='heading'>CODE</div>
<div class='code-wrap'>
<code></code>
</div>
</pre>
</div>
</body>
</html>
This is the code I use to create the file;
$file = 'it.html';
$data = "
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script> var code = 'I WANT THIS TO BE THE VARIABLE $GET I DEFINED FROM PAGE A';</script>
</head>
<body>
<div class='container'>
<pre class='code-sample'>
<div class='heading'>CODE</div>
<div class='code-wrap'>
<code></code>
</div>
</pre>
</div>
";
file_put_contents($file, $data);
Assuming you have $GET['SET'] containing a string then all you have to remember is that when using arrays in a double quoted string you either reference the array as
$_GET[SET] // without the quotes around the index name
Or
{$_GET['SET']} // wrap the array in {}, this is my preference
So this should do what you want
$_GET['SET'] = 'Hello from stack'; // just here for testing
$file = 'it.html';
$data = "
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script> var code = '{$_GET['SET']}';</script>
</head>
<body>
<div class='container'>
<pre class='code-sample'>
<div class='heading'>CODE</div>
<div class='code-wrap'>
<code></code>
</div>
</pre>
</div>
";
Results
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script> var code = 'Hello from stack';</script>
</head>
<body>
<div class='container'>
<pre class='code-sample'>
<div class='heading'>CODE</div>
<div class='code-wrap'>
<code></code>
</div>
</pre>
</div>
Related
When I run my code and press either the button 'encode' or the button 'decode' I get this error:
Uncaught ReferenceError: value1 is not defined
at HTMLButtonElement.onclick (HtmlPage2.html:34)
I have tried to move the script as an external file to the area above the </body> but I still get the same.
It seems that value1 is not recognized at the input as the 'name'. Shouldn't that get it defined?
Shortly:
I don't understand why value1 is undefined. Could someone please explain?
This is my code :
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
alert(newURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode(myURL) {
decodeURL = decodeURIComponent(newURL);
alert(decodeURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" name="value1" />
<button name="encode" onclick="setEncode(value1.value)"> encode </button>
<button name="decode" onclick="setDecode(value1.value)"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
Thank you all!
Use id instead of name attribute.
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode(myURL) {
decodeURL = decodeURIComponent(newURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="value1" />
<button name="encode" onclick="setEncode(value1.value)"> encode </button>
<button name="decode" onclick="setDecode(value1.value)"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
Reason behind this:
If an html element assigned ID attribute, it can be used in javascript with that variable name. For example
myDiv.innerHTML = myDiv.innerHTML + "<p>See? What did I tell you?</p>";
<div id="myDiv">
This div ID is myDiv, can be called in JavaScript.
</div>
You can't assign the values directly to the function in your html. But you can can use selectors to get the value from input and attach an event listener to your button However if you you want to do all this on the html you do something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// encoding and decoding URIs
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
alert(newURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode() {
decodeURL = decodeURIComponent(newURL);
alert(decodeURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
</script>
</head>
<body>
<input type="text" id="value1" />
<button name="encode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> encode </button>
<button name="decode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
So, I'm trying to render a template from an external file, and when I render it, it "works," just that it sends the script, not the actual script contents to the target.
I tried using the jquery .html() function to grab the inside contents of the script, but all I get is "undefined"
This is the body content:
<div id="target"></div>
<script>
var context = {"name": "Test"};
$.get('template.handlebars', function (data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
$(document.body).append(html);
}, 'html')
</script>
What I get is this:
<div id="target"></div>
<script>blah blah blah</script>
<script type="text/x-handlebars-template" id="template">
<h1>Test</h1>
</script>
Instead of
<div id="target">
<h1>Test</h1>
</div>
In response to someone's question:
Doing "body" instead of document.body has the same effect. The contents of the template document are:
<script type="text/x-handlebars-template" id="template">
<h1>{{ name }}</h1>
</script>
In your scenario, you have the handlebars template in a separate file –– which is not a HTML file, so you should try removing the script tag. According to the handlebars docs, they want you to include the script tags for shielding from HTML parser, but in your case that should not be a problem.
Next your jQuery $(document.body).append(html); is selecting the document body and appending the resulting HTML snippet.
To achieve the:
<div id="target">
<h1>Test</h1>
</div>
you'll have to select the target div. Doing a $("#target").html(html); should solve that issue.
I've created a sample to simulate your scenario, hope this gives more insight.
HTML file contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
<div id="target"></div>
<script>
var context = { name: "Test" };
$.get(
"template.handlebars",
function(data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
// $(document.body).append(html);
$("#target").html(html);
},
"html"
);
</script>
</body>
</html>
Handlebars template file contents:
template.handlebars
<h1>{{ name }}</h1>
References
https://handlebarsjs.com/
I'm trying to grab an input value with javascript and render it into a div element. What do I do to make it work?
I'm using querySeclector to grab the input value. When I hardcode it like this:
document.getElementById("result").innerHTML = "Hello World";
It works but doesn't when I replace "Hello World" with the variable that stores the input value and when I do a console.log, I get nothing back even though there are no errors.
HTML
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit">Submit</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
JAVASCRIPT
let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
submitButton.addEventListener("click", weightBalancer);
function weightBalancer() {
showResult = weightsForLeftAndRightSides;
console.log(weightsForLeftAndRightSides);
}
you need get input value inside weightBalancer when sumbit button clicked
function weightBalancer() {
var weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
if i understood your question, you can write this code to put the user input in div tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA_Compatible" content="ie=edge">
<title> Test</title>
<script >
/*to put the user input in div tag*/
function myFunction(){
const userInput=document.querySelector("#firstinput");
const output=document.querySelector("#result");
output.innerHTML=userInput.value;//this parte overwrite the first input
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit" onclick="myFunction()">Submit</button>
</div>
<div id="result"></div>
</div>
</body>
</html>
Hope this helps
I am new to handlehars, and feel the basic tutorials are not very newbie friendly. I have to put pieces together and the following code seems not working. The html is generated correctly which means it does work but nothing shows up.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test handlebars</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
</head>
<body>
<div class="container"></div>
<script>
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
console.log(html);
$(".container").innerHTML = html;
});
</script>
</body>
$(".container").innerHTML = html;
You're mixing vanilla JS and jQuery. Either set the HTML the vanilla way,
document.querySelector(".container").innerHTML = html;
or the jQuery way:
$(".container").html(html);
I tried to create two buttons, so that when I click on each- I will get a pop up small window, with a content that it will get while onloading.
This is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
<span ng-repeat="x in items">
<button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
<br><br>
</span>
</p>
<script>items();</script>
</body>
</html>
script.js:
var title, content;
function items(){
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.items = [
{fieldOne:"field1", fieldTwo:"field1 content"},
{fieldOne:"field2", fieldTwo:"field2 content"}
];
$scope.parentFunc=function(titleTmp,contentTmp){
title=titleTmp;
content=contentTmp;
var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
return false;
}
});
}
function codeAddress() {
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
popUp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
The new pop up window open as expected, but the h1 and div in it get undefined. I tried to debug it, and I saw that after the first two lines of parentFunc are executed, the global variables title and content get what I expect and they are not undefined. However, when the third line is executed and the new window get opened- the global variables are undefined.
Why the two global variables are undefined in the pop up window?
And how can I solve this?
Your method won't work : you are trying to reload the script.jsand then, the vars are reinitialized.
Add your vars in the URL :
var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');
Then, in your second page, read those parameters :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function codeAddress(){
var title = GET_TITLE_FROM_PARAMETER;
var content = GET_CONTENT_FROM_PARAMETER;
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
</script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
And of course, remove codeAddress from the first page as it's useless.
FYI, to get the parameters values, please check this answer.