How to open different local files according to the result?

Question

I'm very new to javascript and I'm having an issue with this script:

function processInp() {
    var x = parseInt(document.querySelector('input[name="num"]').value);
    if (!x) {
        alert("NaN");
        return false
    } else if (x > 480) {
        alert("Overflow!");
        return false
    }
    window.open("../files/" + x + '.html');
    return true
}

First, it checks if the input is a number, then if it is higher than 480, so throw an alert and an error. That's completly fine and working. What I really can't do is opening the url according to the input. Is it possible with numbers? How? Full example if possible. Thank you!

yes, javascript will convert x to a strong for you in this case, so your `window.open` line should return `"../files/12.html"`? — Stu, Jul 24 '16 at 13:33
ah ok, I thought that was the intention? How do you want to open files depending on the user input? i.e. a different value depending on a range of inputs etc? — Stu, Jul 24 '16 at 13:36
If input is 1, open 1.html. If it is 450, open 450.html. @Stu — MucaP, Jul 24 '16 at 13:36
that should work in your case then? ix x = 12, it'll open "../files/12.html"? if x = 110 it'll open "../files/110.html" — Stu, Jul 24 '16 at 13:38
this is what your code outputs, sorry if I'm not seeing the question right: https://jsfiddle.net/8qd5t1x8/ — Stu, Jul 24 '16 at 13:41
@Stu no, and there's nothing special with the number 12, also. It does nothing, just updates the url adding ?num=[input] (for example ?num=1 — MucaP, Jul 24 '16 at 13:43
ah ok, so what do you want to happen when the number x validates (i.e. is a number and is lower than 480?) What do you want to do with "15.html" (in a case where x = 15) — Stu, Jul 24 '16 at 13:45
@MucaP then that code isn't running. What you are seeing is the default behaviour when submitting a form. If your code had run, then it would have opened a different page. — VLAZ, Jul 24 '16 at 13:45
@Stu No, that's nothing to do with ranges. If input is 1, *open* 1.html in a new page. If it is 2, open 2.html and it goes like that, there's a page for all the inputs. — MucaP, Jul 24 '16 at 13:47
then @Vld is right, you need to bind this behavior to the form when you want the behavior to happen — Stu, Jul 24 '16 at 13:47
ok cool, so the question is; "how do I get the below code to run when someone submits a form"? or "how do I get the below code to run when someone updates an input text box?"? — Stu, Jul 24 '16 at 13:48
@Stu yes, look at that fiddle: https://jsfiddle.net/9e91gmso/ — MucaP, Jul 24 '16 at 13:50
@MucaP, thanks, adding the form into the example gives it context and a lot easier to try to help :) — Stu, Jul 24 '16 at 13:56

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

Looking at your example https://jsfiddle.net/9e91gmso/, I think this might be due to scope.

As changing the line function processInp() { to window.processInp = function () { (i.e. https://jsfiddle.net/9e91gmso/1/) seems to work correctly?

I think this is a pretty good post about scope if you want to read up further: What is the scope of variables in JavaScript?

edited May 23 '17 at 12:22

Community

1
1

answered Jul 24 '16 at 13:55

Stu

4,160
24
43

1

That problem might be specific to JSFiddle. The function should have been hoisted to the top, assuming it was in the global scope to begin with. – VLAZ Jul 24 '16 at 13:58
@Vld, exactly, I don't propose this is the absolute answer, but I think looking at the scope and positioning of code in the actual app would help point to the right solution :) – Stu Jul 24 '16 at 13:59
why the -1? I'm trying to point OP in the right direction, and I think I've explained why and how... – Stu Jul 24 '16 at 14:00
@Stu oh, yes - it helps to be explicit in assigning the function to the `window` object - that way, even if it's wrapped in a closure later on for whatever reason, it would still work. Just wanted to point out that the behaviour in JSFiddle is not necessarily "representative" of how it works. EDIT: also, didn't downvote. – VLAZ Jul 24 '16 at 14:01
@Vld 100% agree, but as we can't see OP's full code I can only speculate as to the right answer, having said that I'm pretty sure it's a scope issue, i.e. the form can't see the function in the jsfiddle... but agree it needs to be looked in further, hence the scope link that I thought might help :) – Stu Jul 24 '16 at 14:04

How to open different local files according to the result?

1 Answers1