如何通過同一頁面將變量傳遞給javascript頁面重新加載？

說我想在我的HTML代碼中有一個文本框，用戶輸入地圖的高度和寬度。，我希望我的JavaScript代碼處理傳遞的變量並根據這些值生成一個映射。如何通過同一頁面將變量傳遞給javascript頁面重新加載？

這是我的問題。我不想使用笨重的prompt（）函數，它真的很煩人，而且非常有限。如果我使用表單標籤，並提交一個提交按鈕它將刷新頁面，我不想這樣做，但我沒有提交任何內容，只將變量傳遞給我的腳本。

因爲一切都將由JavaScript完成，沒有什麼會發送到服務器或任何類型的數據庫，我希望一切都在同一頁面上完成，沒有任何重新加載或刷新，結果是在用戶點擊一個按鈕後立即顯示。

我該怎麼做？

<script> 
function validateInput() { 
// check if the values are numbers if not generate an error and return a false value 
} 
function getMapSize() { 
// get the user input data and return it as an array 
} 

function generateMap() { 
var map = []; 
map = getMapSize(); 
// generate the map and show the result on current page 
} 
if (variables are set and they are numbers) { 
generateMap(); 
} 
</script> 
Height:<input id="mapSize" name="mapHeight" type="text"></input> 
Width:<input id="mapSize" name="mapWidth" type="text"></input>

來源

2013-05-15 ilgaar

四個類似的問題，我敢肯定有更多：http://stackoverflow.com/questions/16082357/pass-data-from-a-dynamically- generated-list-from-one-page-to-another或http://stackoverflow.com/questions/16264253/sharing-a-variable-between-multiple-html-pages或http://stackoverflow.com/questions/ 3724106/how-to-exchange-variables-between-two-html-pages或http://stackoverflow.com/questions/16328717/pass-arguments-from-one-html-page-to-the-other – Xotic750

有什麼你試過還是研究過？我甚至不知道你在做什麼。 – Xotic750

我正在嘗試編寫一個簡單的腳本，用於根據用戶輸入使用圖像生成圖形二維地圖。用戶可以編輯地圖，當他或她完成後將其保存在自己的機器上。 – ilgaar

像Niels說的，你可以使用<button onclick="getMapSize()" >Generate map</button>
順便說一句，一定要保持輸入元素的唯一ID。你可以得到userinput是這樣的：

<script> 

function getMapSize() { 
    var height = document.getElementById('mapHeight').value; 
    var width = document.getElementById('mapWidth').value; 

    if (validateInput(height) == true && validateInput(width) == true) { 
     generateMap(height, width); 
    } 
} 

function validateInput(input) { 
    // Validate input... 

    if (isValid) { 
     return true; 
    } else { 
     return false; 
    } 
} 

function generateMap(height, width) { 
    // Generate map with the given height and width 
} 

</script>

來源

2013-05-15 00:43:58 cumul

好的。感謝您的迴應。那麼這個返回假貨的處理是什麼？它如何影響我的腳本？它只是防止郵寄回來？ – ilgaar

如果您使用的按鈕類似'

有幾種方法。您可以修補表格的onsubmit，最後返回false，或者完全省略表格，並按<button>元素的onclick行事。他們都是類似的解決方案，最好的取決於整個實施。

我颳起了a small sample here來說明如何用一個按鈕做的，代碼歸結爲：

<label>Width: <input type="number" id="width" value="5"></label><br> 
<label>Height: <input type="number" id="height" value="5"></label><br> 
<button onclick="$('output').set('text', 'Surface size is ' 
       + ($('width').value * $('height').value));">Click me!</button> 
<div id="output">Not clicked yet</div>

當然你出分裂onclick代碼在真正的代碼單獨的JavaScript。我使用Mootools抽取了樣本，但它很容易適應jQuery或非庫JS。

來源

2013-05-15 00:11:48

如果我有一個函數處理數據驗證並在計算後返回多個值，該怎麼辦？我怎樣才能提取函數返回的值，而不是布爾返回值，而不必丟棄阻止帖子回來的返回false語句？ – ilgaar

說我有： function getCoordinates（）{ var x; var y; var bitMapAddress; //獲取用戶數據 //檢查數據是否有效如果（數據無效） {document.getElementById（'someId'）。InnerHTML =「Error！」; 返回false; // <---這是否結束了函數並阻止其餘的語句運行？ } //假設以下語句僅如果數據是有效的，否則應該有一個if語句 //一些計算 bitMapAddress = X + Y *（X + 1）運行; //處理數據 return [x，y，bitMapAdress，false] // <---這是正確的方法嗎？返回false以防止郵寄回來？ – ilgaar

因此，如果需要此功能可將三個值傳遞給其他函數，但同時返回false以防止回傳。我該怎麼辦？或者這不是正確的方法，所有這些任務都應該由他們自己的獨立功能來處理？ – ilgaar

如何通過同一頁面將變量傳遞給javascript頁面重新加載？

回答

相關問題