Based on some other code I found from this site (This Question here - Get URL and save it | Chrome Extension)
I was wondering on how to display the URL of a current page in a input box. My coding is below
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentLink').innerHTML = tab.url;
});
</script>
</head>
<body>
<div class="links">
<div id="currentLink">Getting Current URL...</div>
<input type="text" id="currentLink" value="Loading...">
</div>
</body>
</html>
(I've cut some features out).
But my question is, how can I get the URL to display in the input box, it displays when I use "div id" but not when I use "input id" any ideas why?
You have to set the value attribute of inputs.
document.getElementById('currentLink').value = tab.url;
Related
I've been searching for a while, and I found that I can send a value from doGet to html created.
But I want to do smth different, I want to have a button and label where where every time I press on that button it increments the label.
something like a counter for pressing that button.
I already has the HTML that renders button and label it's pretty simple
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('stylesheet'); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LDP Test</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function incrementCounter() {}
</script>
</head>
<body>
<label> Counter 0 </label>
<button onClick="incrementCounter"> Increment counter</button>
</body>
</html>
I want to link the incrementCounter function to this label, or whatever html element that can be done that whenever the button is pressed it gets incremented and rendered on the screen
can someone guide me to go through this ?
You have some errors in your code. Firstly it should be onclick not onClick and the function should be called as onclick="incrementCounter()".
Secondly, a label should be used with a input, textarea or select element.
Now coming to the code
HTML
<p>Count: <span id="counter">0<span></p>
<button onclick="incrementCounter()">Increment Counter</button>
JS
function incrementCounter() {
const counterElem = document.querySelector('#counter'),
count = +counterElem.innerHTML;
counterElem.innerHTML = count+1;
}
What is happening inside the code is I'm selecting the target element where the count would display. Then I'm getting the value of its innerHTML and parsing it as an integer using + before the counterElem.innerHTML. Then I'm adding 1 to the value and setting it as the innerHTML
I have made a form and I need to submit the form but whenever I tried to do the same the page reloads and does nothing! I tried both ng-submit <form> attribute and the ng-click as a <button> attribute! I also tried changing the button type from "submit" to "button" then also I get the same result!
Any help would be seriously appreciated!
Thanks!
hope this simple plunker example helps
https://plnkr.co/edit/5q9149KSs7qJH0R32NAS?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="App" ng-controller="Ctrl">
<form ng-submit="myFunc()">
<input type="text" ng-model="data">
<input type="submit">
</form>
<p>{{submited}}</p>
<script>
var app = angular.module("App", []);
app.controller("Ctrl", function($scope) {
$scope.submited = [];
$scope.myFunc = function () {
$scope.submited.push($scope.data);
}
});
</script>
</body>
</html>
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Literally Canvas</title>
<link href="css/literallycanvas.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="react-with-addons.min.js"></script>
<script src="underscore-min.js"></script>
<script src="js/literallycanvas-core.min.js"></script>
<script src="js/literallycanvas.js"></script>
</head>
<body>
<div class="literally"></div>
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<script>
$(document).ready(function(){
//initial without jQuery
var lc = LC.init(
document.getElementsByClassName('literally')[0],{
imageURLPrefix:'img',
primaryColor:'#fff',
backgroundColor:'#ddd',
toolbarPosition:'top',
tools:
[
LC.tools.Pencil,
LC.tools.Eraser,
LC.tools.Line,
LC.tools.Rectangle,
LC.tools.Text,
LC.tools.Polygon
]
});
//export as png
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
});
</script>
</body>
</html>
I have download literallycanvas-0.4.11 and added the files under css/ and img/ to my project, as well as the appropriate file from js/.
I can see the initial is worked because I can see the primaryColor was changed but I can't find my tools.
I followed the literally canvas however it still something wrong.
Anybody can help me??
I changed imageURLPrefix option and it worked for me. Just write path to your img folder there.
var lc = LC.init(
document.getElementsByClassName('my-drawing')[0],
{
imageURLPrefix: 'path/to/your/img',
.....
.....
});
Here is the code that should render a "raised" paper-button:
All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.
UPDATE :
for the moment the only way to get the correct rendering is by replacing
<paper-button raised>test</paper-button>
BY
<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />
ANY WORKAROUND avoiding this 'dangerous' way?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<title>Hello React</title>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var ButtonT = React.createClass({
render: function() {
return (
<div>
<paper-button raised="true">test</paper-button>
</div>
);
}
});
React.render(
<ButtonT />,
document.getElementById('content')
);
</script>
</body>
</html>
Should the "raised" attribute be passed as a this.props...?
It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.
In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;
I have 3000 images in a folder. All named 1000.jpg 1001.jpg and so on.
From 1000 to 3000.
I would like to make a html file and to have a text box and when i input the number (ie, 1000) it will show me the file 1000.jpg.
Also when i would click the file it will hide this.
I need this to properly manage the warehouse and to have the pattern images on my mobile.
Thanks
maybe this can help you--
<input type="number" id="my-input">
See the Image
<Script>
$("#b").click(function() {
var s=$("#my-input").val()
$("#b").attr("href", s+".jpeg");
}
});
</script>
So, what it does is that it takes the value of "#my-input" and appends the value of href attribute to the filename.
You can have some thing like this.
document.getElementById("imageid").src= folderPath + document.getElementById("inputID").value + ".jpg";
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="imageName">
<input type="button" id="view" value="View"/>
<div id="imageDiv">
</div>
<script>
$("#view").on("click", function()
{
var image=$("#imageName").val();
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
});
</script>
</body>
</html>
Assuming that this HTML and the images are in the same folder. If the images are in a different folder, change this line:
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
For ex: if the images are in a folder called images:
$("#imageDiv").html("<img src='images/"+image+".jpg'></img>");