HTML5 Canvas how to automatically keep track of text user input [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
This is the code if you want to try it out:
https://jsfiddle.net/csCoder/eLxfrn10/8/
I currently have 2 textboxes from the user will type in their input and when they press "draw line", then the input is read and a line is drawn accordingly. I want to make it so that the line will automatically be drawn whenever the user inputs anything in the textbox (without having to click on a button) OR whenever the user uses the slider.
Currently the lines that I drew changed based on what is typed into the textbox. However, I have a slider that updates the text box and I want my program to keep track of the slider AND the textboxes instead of just the textboxes if that makes sense. I appreciate your help!
This is what it looks like right now:
Picture
I cleaned up the code to make it easier and more relevant:
This code snippet represents the slider and the textbox (user should be able to use either to input numbers).
<input id="rangeInputM" type="range" min="-10" max="10" oninput="m1.value=rangeInputM.value" />
<input id="m1" type="number" value="1" min="-200" max="200" oninput="rangeInputM.value=m1.value" />
This is where I am having trouble getting my drawing to update whenever I either input new text or move the slider. Using #m1 as the selector works for updating the text box, but I am trying to get both the textbox (#m1) and the slider (#rangeInputM) to work:
$("#rangeInputM").keyup(function(){
var m1,b1 = 0;
m1 = parseFloat($("#m1").val());
b1 = parseFloat($("#b1").val());
var myGraph = new Graph({
canvasId: 'Graph',
minX: -10,
minY: -10,
maxX: 10,
maxY: 10,
unitsPerTick: 1
});
myGraph.drawLine(m1, b1, 'blue', 3);
});
Thanks!

Related

Change referral link [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have question. Is there any way for html or javascript?
I have adf.ly referral link(example): adf.ly/12345 + link.
To download my source download file1 i input link as: adf.ly/12345/https://example.com/downloadfile1
For file2 link i input adf.ly/12345/https://example.com/downloadfile2
.. and so on for many links.
But one day I need to change my referral link from adf.ly/12345 to adf.ly/6789
So i need to change above link one by one:
adf.ly/6789/https://example.com/downloadfile1
adf.ly/6789/https://example.com/downloadfile2
.. and so on.
My question, is there any way to auto change any link start from adf.ly/12345+url to adf.ly/6789+link, using html or JavaScript?
I try to search the topic, but I'm just beginner. I cant find any or maybe wrong search.
Suppose you are using two input tags, first to get input for the initial url and in the next input field insert the new url, when clicking the button, it will replace the existing url with the new one everywhere.
function replaceUrl () {
let initial = document.getElementById("initial").value;
let replace = document.getElementById("replace").value;
let url = ['shorte.st/abc123/https://example.com/downloadfile2', 'adf.ly/12345/https://example.com/downloadfile2']
url = url.map((u) => u.includes(initial) ? u.replace(initial, replace) : u)
console.log(url)
}
Enter first part <input type="text" id="initial"/>
Enter second part <input type="text" id="replace"/>
<input type="button" value="Change" onclick="replaceUrl()">

Can I get sound from only right/left earphone with javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
When I play a sound with js, I just want the sound coming from the right. how can I do that
Yes. Check out StereoPannerNode from the Web Audio API.
The pan property takes a unitless value between -1 (full left pan) and
1 (full right pan). This interface was introduced as a much simpler
way to apply a simple panning effect than having to use a full
PannerNode.
Also see this example: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API#Adding_stereo_panning_to_our_app:
const pannerOptions = { pan: 0 };
const panner = new StereoPannerNode(audioContext, pannerOptions);
<input type="range" id="panner" min="-1" max="1" value="0" step="0.01">
const pannerControl = document.querySelector('#panner');
pannerControl.addEventListener('input', function() {
panner.pan.value = this.value;
}, false);
track.connect(gainNode).connect(panner).connect(audioContext.destination);
(Note: this isn't specific to Vue)

Flickering HTML Form button radio Javascript true/false [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I would like to make a button which I can put on "true/false" on a certain time with javascript. I want to make a flickering button. How could I do this in Javascript?
I tried something like this:
<td colspan="1" class="button" tabindex="1">
<input type="radio" tabindex="-1">
</td>
__
setTimeout(function() {
$("*[tabindex='1']").find('input').get(0).checked = true;
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio
(This button)
This checks/unchecks the button randomly and you can certainly change the logic behind when the button should be on vs. off, but it shows how to check and uncheck the radio button natively (no JQuery) with the addition or removal of the checked attribute on the Radio Button.
var btn = document.getElementById("rad");
setInterval(function(){
var rnd = Math.random();
console.log(rnd);
rnd > .5 ? btn.setAttribute("checked", "checked") : btn.removeAttribute("checked");
}, 500);
<input id="rad" type="radio">
Your code will work if you put the <td> element inside <table> tags.
If the <td> is outside of a table element, it is removed so you cannot access the radio button by searching for the parent td.
To make the button flicker, try having the function reset itself:
function buttonOnAfterDelay()
{
var $radioButton = $("*[tabindex='1']").find('input').get(0);
if ($radioButton.checked)
$radioButton.checked = false;
else $radioButton.checked = true;
setTimeout(function() {buttonOnAfterDelay()}, 1000);
}
buttonOnAfterDelay();

I don't understand the concept of this function in Javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
for example, you would have
<input id="searchbox" type="text" value="Type Here..." />
<button id="clickbait">Click Me</button>
<div id="emptydiv">sda</div>
<script type="text/javascript">
var clickthis="clickbait";
var searchinput=document.getElementById("searchbox").value;
var generate="emptydiv";
document.getElementById(clickthis).onclick=function () {
searchinput=document.getElementById("searchbox").value;
document.getElementById(generate).innerHTML=searchinput;
}
</script>
So this is pretty much just something to change the text in the empty div to whatever is in the text field when you click on the button but I don't understand the "idea" of what's going on here. I already set the var to a value so why do you need to grab the value again?
I can understand the other basics so far like document(refers to the whole page) then getelementbyid(refers to the element) and then on the click you want it to perform a function but everything after that is confusing.
I already set the var to a value so why do you need to grab the value
again?
When you set the searchinput value first before the onclick assignment, you fetched and assigned the value of searchinput at that time.
Inside the click event handler, you are getting the value in searchinput when the div is clicked so the value at that time might be different.
When its firing click event then searchinput=document.getElementById("searchbox").value;
that means searachinput is what everever typed in the input feild
and then that value is being reassigned to
document.getElementById(generate).innerHTML=searchinput;
`
When the button is clicked fire the event:
document.getElementById(clickthis).onclick=function ()
Get the value of 'searchBox':
searchinput=document.getElementById("searchbox").value;
Assign what ever was in the 'searchBox' as HTML in 'emptyDiv'
document.getElementById(generate).innerHTML=searchinput;
Just to note that:
searchinput=document.getElementById("searchbox").value;
Is actually redundant because you are already declaring it with the other vars.
So your code should look like this:
document.getElementById('clickbait').onclick=function () {
var searchinput = document.getElementById("searchbox").value;
document.getElementById('emptydiv).innerHTML=searchinput;
}
Or to make it even simpler and cut it down to 2 lines you could even use jQuery:
$('#clickbait').on('click', function(){
$('#emptydiv').innerHTML = $('#searchbox').value;
}
It copies the value of input into the "emptydiv" div when you click on the button.
Why is the real good question, here, IMO.

HTML or JavaScript to multiply [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Here is what I have been trying to figure out for days now. I have some code already typed up that outputs a number based on what check boxes are checked. What I want now is some code that grabs the number from that numberbox and multiplies it by a set number in a different numberbox.
Here is the JavaScript that I swiped from somewhere to try and get this to work but to no avail.
<script type="javascript">
function calculate() {
var myBox1 = document.getElementById('ttl').value;
var myBox2 = document.getElementById('ttl2').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2;
result.innerHTML = myResult;
}
</script>
And here is the HTML that I am trying so hard to bash against it to make it work.
<input type="number" id="ttl" value=729><br>
<input id="result" />
The check boxes add more to the base of 729 and I want the lower box to multiply by 1.1
Any help out there for a code moron?
EDIT:
I don't know of much other way to ask this. I have a value that is put into a numberbox. I want a second numberbox that grabs the first box's number on the fly and multiply it by a set number which happens to be 1.1. Like I commented before, I know what I want to ask, but I don't know how to ask it exactly
The element with the id result is an input box:
<input id="result" />
Change result.innerHTML = myResult; to result.value = myResult; and the calculated number will be displayed there. See on JSFiddle.

Categories

Resources